frontend/src/views/realTimeMonitor/index.vue

<template>
  <div class="realMonitor">
    <div class="monitor-container">
      <!-- 左侧数据列表树 -->
      <div class="sideBar">
        <div class="searchBar">
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText"
            prefix-icon="el-icon-search"
          >
          </el-input>
        </div>
        <div class="deviceNum">
          <el-statistic title="装置在线 / 总数">
            <template slot="formatter">
              （<span>{{ onlineNum ? onlineNum : 0 }}</span> /
              <span>{{ totalNum ? totalNum : 0 }}</span
              >）
            </template>
          </el-statistic>
        </div>
        <el-tree
          ref="tree"
          :empty-text="emptyText"
          :data="lineTreeData"
          :props="defaultProps"
          node-key="id"
          default-expand-all
          highlight-current
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          :current-node-key="currentNodekey"
          @node-click="handleNodeClick"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span v-if="node.level === 1">
              <span
                class="iconfont icon-dianli"
                style="margin-right: 6px"
              ></span>
              <span>{{ node.label }} </span>
            </span>
            <span v-else-if="node.level === 2">
              <span
                class="iconfont icon-dianlihangye"
                style="margin-right: 6px"
              >
              </span>
              <span>{{ node.label }} </span>
            </span>
            <span v-else>
              <span
                class="iconfont icon-video-camera"
                :class="data.onlinestatus == 0 ? 'disconnect' : ''"
                style="margin-right: 6px"
              ></span>
              <span :class="data.onlinestatus == 0 ? 'disconnect' : ''">{{
                node.label
              }}</span>
            </span>
            <!-- <span :class="data.onlinestatus == 0 ? 'disconnect' : ''"
              >{{ node.level }}---{{ node.label }}</span
            > -->
          </span>
        </el-tree>
      </div>
      <div class="resize" title="收缩侧边栏"></div>

      <div class="picSetBox previewBox" v-if="towerFlag">
        <!-- 预览图页面 -->
        <previewContain
          ref="previewRef"
          :previewData="previewData"
        ></previewContain>
      </div>
      <!-- 带参数的中心内容右侧参数区 -->
      <div class="picSetBox" v-else>
        <div class="swiperBox">
          <div class="title">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item> {{ towertitle }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <carouselChart
            ref="carouselpic"
            :terminalPhoto="terminalPhoto"
            v-if="terminalPhoto.length > 0"
          ></carouselChart>
        </div>
        <div class="parameterArea">
          <div class="zzbox">
            {{ zzCmdid }}
          </div>
          <div class="paramsDate">
            <h3>日历快速查询</h3>
            <el-date-picker
              v-model="dateValue"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="timestamp"
              :picker-options="pickerOptions"
              @change="changedate"
              :clearable="false"
            >
            </el-date-picker>
          </div>
          <div class="monitorItemBox">
            <h3>选择通道监拍点</h3>
            <el-select
              v-model="selectChannelValue"
              placeholder="请选择通道"
              @change="changeChannelId"
              ref="multiSelect"
            >
              <el-option
                v-for="item in channelListOption"
                :key="item.value"
                :label="
                  item.alias !== null && item.alias !== ''
                    ? item.alias
                    : item.label
                "
                :value="item.value"
              >
                {{
                  item.alias !== null && item.alias !== ""
                    ? item.alias
                    : item.label
                }}
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getdyTreeListJoggle,
  getChannelByTermidJoggle,
  getTerminalPhotoListJoggle,
} from "@/utils/api/index";
import previewContain from "./previewContain.vue";
import carouselChart from "../components/carouselChart.vue";
export default {
  components: { previewContain, carouselChart },
  data() {
    return {
      onlinestatus: "", //设备状态啊
      onlineNum: "", //在线数
      totalNum: "", //装置总数
      selectData: "", //点击选中的数据
      type: "", //选中的类型
      lineTreeData: [],
      filterText: "",
      defaultProps: {
        //指定参数格式回显数据
        children: "list",
        label: "name",
      },
      currentNodekey: "", //默认选中的节点树,
      previewData: [], //预览图数据
      page: 1, // 当前页数
      pagesize: 16, //当前多少条数据
      total: 0, //总条数
      treetimer: null, //轮询状态timer
      towerFlag: true, //判断是否是图片list
      towertitle: "", //装置杆塔信息
      terminalPhoto: [
        {
          id: 209654,
          termId: 10323,
          channelId: 1,
          channelName: "通道1",
          alias: "白天",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 171068,
          photoTime: "2023-07-17T08:00:02.000+00:00",
          recvTime: "2023-07-17T07:59:59.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717160002.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209646,
          termId: 10323,
          channelId: 2,
          channelName: "通道2",
          alias: "黑夜",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 229840,
          photoTime: "2023-07-17T07:47:36.000+00:00",
          recvTime: "2023-07-17T07:47:33.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717154736.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209644,
          termId: 10323,
          channelId: 1,
          channelName: "通道1",
          alias: "白天",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 173700,
          photoTime: "2023-07-17T07:47:08.000+00:00",
          recvTime: "2023-07-17T07:47:03.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717154708.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209641,
          termId: 10323,
          channelId: 2,
          channelName: "通道2",
          alias: "黑夜",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 231280,
          photoTime: "2023-07-17T07:44:32.000+00:00",
          recvTime: "2023-07-17T07:44:28.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717154432.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209638,
          termId: 10323,
          channelId: 1,
          channelName: "通道1",
          alias: "白天",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 200977,
          photoTime: "2023-07-17T07:43:34.000+00:00",
          recvTime: "2023-07-17T07:43:30.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717154334.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209633,
          termId: 10323,
          channelId: 2,
          channelName: "通道2",
          alias: "黑夜",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 244618,
          photoTime: "2023-07-17T07:38:08.000+00:00",
          recvTime: "2023-07-17T07:38:03.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717153808.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209632,
          termId: 10323,
          channelId: 1,
          channelName: "通道1",
          alias: "白天",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 227006,
          photoTime: "2023-07-17T07:37:46.000+00:00",
          recvTime: "2023-07-17T07:37:42.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717153746.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209631,
          termId: 10323,
          channelId: 2,
          channelName: "通道2",
          alias: "黑夜",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 232942,
          photoTime: "2023-07-17T07:35:44.000+00:00",
          recvTime: "2023-07-17T07:35:40.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717153544.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209629,
          termId: 10323,
          channelId: 1,
          channelName: "通道1",
          alias: "白天",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 169296,
          photoTime: "2023-07-17T07:35:10.000+00:00",
          recvTime: "2023-07-17T07:35:06.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717153510.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209606,
          termId: 10323,
          channelId: 1,
          channelName: "通道1",
          alias: "白天",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 225203,
          photoTime: "2023-07-17T07:00:02.000+00:00",
          recvTime: "2023-07-17T06:59:57.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717150002.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209601,
          termId: 10323,
          channelId: 1,
          channelName: "通道1",
          alias: "白天",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 276768,
          photoTime: "2023-07-17T06:46:41.000+00:00",
          recvTime: "2023-07-17T06:46:37.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717144641.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209595,
          termId: 10323,
          channelId: 1,
          channelName: "通道1",
          alias: "白天",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 214869,
          photoTime: "2023-07-17T06:00:02.000+00:00",
          recvTime: "2023-07-17T05:59:58.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717140002.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209580,
          termId: 10323,
          channelId: 1,
          channelName: "通道1",
          alias: "白天",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 213474,
          photoTime: "2023-07-17T05:00:02.000+00:00",
          recvTime: "2023-07-17T04:59:58.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717130002.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209549,
          termId: 10323,
          channelId: 1,
          channelName: "通道1",
          alias: "白天",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 214600,
          photoTime: "2023-07-17T04:00:02.000+00:00",
          recvTime: "2023-07-17T03:59:58.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717120002.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209535,
          termId: 10323,
          channelId: 1,
          channelName: "通道1",
          alias: "白天",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 213311,
          photoTime: "2023-07-17T03:00:02.000+00:00",
          recvTime: "2023-07-17T02:59:58.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717110002.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209529,
          termId: 10323,
          channelId: 1,
          channelName: "通道1",
          alias: "白天",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 213896,
          photoTime: "2023-07-17T02:00:05.000+00:00",
          recvTime: "2023-07-17T02:00:01.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717100005.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209521,
          termId: 10323,
          channelId: 1,
          channelName: "通道1",
          alias: "白天",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 217319,
          photoTime: "2023-07-17T01:00:02.000+00:00",
          recvTime: "2023-07-17T00:59:58.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717090002.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209512,
          termId: 10323,
          channelId: 1,
          channelName: "通道1",
          alias: "白天",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 136386,
          photoTime: "2023-07-17T00:00:02.000+00:00",
          recvTime: "2023-07-16T23:59:58.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717080002.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209505,
          termId: 10323,
          channelId: 1,
          channelName: "通道1",
          alias: "白天",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 160791,
          photoTime: "2023-07-16T23:00:02.000+00:00",
          recvTime: "2023-07-16T22:59:58.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717070002.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209493,
          termId: 10323,
          channelId: 2,
          channelName: "通道2",
          alias: "黑夜",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 1315637,
          photoTime: "2023-07-16T22:00:15.000+00:00",
          recvTime: "2023-07-16T22:00:11.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717060015.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209490,
          termId: 10323,
          channelId: 1,
          channelName: "通道1",
          alias: "白天",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 131594,
          photoTime: "2023-07-16T22:00:02.000+00:00",
          recvTime: "2023-07-16T21:59:58.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717060002.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209484,
          termId: 10323,
          channelId: 2,
          channelName: "通道2",
          alias: "黑夜",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 164643,
          photoTime: "2023-07-16T21:00:02.000+00:00",
          recvTime: "2023-07-16T21:00:00.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717050002.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209477,
          termId: 10323,
          channelId: 2,
          channelName: "通道2",
          alias: "黑夜",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 53881,
          photoTime: "2023-07-16T20:00:02.000+00:00",
          recvTime: "2023-07-16T19:59:59.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717040002.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209470,
          termId: 10323,
          channelId: 2,
          channelName: "通道2",
          alias: "黑夜",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 50555,
          photoTime: "2023-07-16T19:00:02.000+00:00",
          recvTime: "2023-07-16T18:59:59.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717030002.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209463,
          termId: 10323,
          channelId: 2,
          channelName: "通道2",
          alias: "黑夜",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 902957,
          photoTime: "2023-07-16T18:00:02.000+00:00",
          recvTime: "2023-07-16T17:59:57.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717020002.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209455,
          termId: 10323,
          channelId: 2,
          channelName: "通道2",
          alias: "黑夜",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 57962,
          photoTime: "2023-07-16T17:00:02.000+00:00",
          recvTime: "2023-07-16T16:59:59.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717010002.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
        {
          id: 209449,
          termId: 10323,
          channelId: 2,
          channelName: "通道2",
          alias: "黑夜",
          presetId: 255,
          width: 1920,
          height: 1080,
          fileSize: 82371,
          photoTime: "2023-07-16T16:00:02.000+00:00",
          recvTime: "2023-07-16T16:00:00.000+00:00",
          path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717000002.jpg",
          thumb: null,
          manualRequest: null,
          mediaType: 0,
        },
      ], //获取装置当前图片数据
      zzCmdid: "",
      dateValue: "", //选择日期
      pickerOptions: {
        disabledDate(date) {
          return date.getTime() > Date.now(); // 禁用大于今天的日期
        },
      },
      channelListOption: [], //通道内容
      selectChannelValue: "", //选中的通道
    };
  },
  watch: {
    filterText(val) {
      console.log(val);
      this.$refs.tree.filter(val);
      console.log(this.$refs.tree);
    },
  },
  computed: {},
  mounted() {
    this.dragControllerDiv();
  },
  created() {
    //获取日期
    this.getDateTime();
    console.log(this.dateValue);
    this.getLineTreeList();
    this.treetimer = window.setInterval(() => {
      setTimeout(this.getLineTreeStatus(), 0);
    }, 300000);
  },
  methods: {
    //获取当前时间
    getDateTime() {
      this.dateValue = new Date().getTime();
    },
    //选择时间
    changedate() {
      console.log(this.dateValue);
    },
    //点击当前选中的treenode
    handleNodeClick(data) {
      console.log(data);
      this.selectData = data;
      //this.previewData = data;
      if (data.dyValue) {
        this.towerFlag = true;
        console.log("电压");
        this.type = 1;
        //this.getPicList(data.id, this.type);
        this.$refs.previewRef.getPicList(data.id, this.type);
      } else if (data.bsManufacturer) {
        this.towerFlag = true;
        console.log("线路");
        this.type = 2;
        this.$refs.previewRef.getPicList(data.id, this.type);
        //this.getPicList(data.id, this.type);
      } else {
        console.log("杆塔");
        this.towerFlag = false;
        this.towertitle = data.name;
        this.zzCmdid = data.cmdid;
        this.getChannelList(data.id);
        // this.getTerminalPhotoList(id, date, data.id);
      }
    },
    //轮询获取装置状态
    getLineTreeStatus() {
      getdyTreeListJoggle()
        .then((res) => {
          console.log(res);
          this.lineTreeData = res.data.list;
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(this.selectData.id); //一定要加这个选中了否则样式没有出来
          });
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //树状图搜索
    filterNode(value, data) {
      console.log(value, data);
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //获取左侧树结构
    getLineTreeList() {
      this.emptyText = "正在加载中...";
      getdyTreeListJoggle()
        .then((res) => {
          console.log(res);
          this.lineTreeData = res.data.list;
          console.log(this.lineTreeData);
          this.onlineNum = res.data.onlineNum;
          this.totalNum = res.data.totalNum;
          if (this.lineTreeData[0].list[0].list.length > 0) {
            this.emptyText = "暂无数据";
            this.selectData = this.lineTreeData[0]; //第一个选中的数据
            this.currentNodekey = this.lineTreeData[0].id; //第一个数据
            this.type = 1;
            this.newCurrentId = this.lineTreeData[0].id;
            this.previewData = this.lineTreeData[0]; //预览图数据
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来

              this.$refs.previewRef.getPicList(this.currentNodekey, this.type);
            });
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },

    //获取通道的接口
    getChannelList(id) {
      getChannelByTermidJoggle({ termid: id })
        .then((res) => {
          console.log(res);
          this.channelList = res.data.list;
          console.log(this.channelList);
          this.channelListOption = [];
          this.channelListOption.push({
            label: "全部",
            value: "-1",
            termid: "",
            alias: "",
          });
          this.channelList.forEach((item) => {
            this.channelListOption.push({
              label: item.channelname,
              value: item.channelid,
              termid: item.termId,
              alias: item.alias,
            });
          });
          this.selectChannelValue = this.channelListOption[0].value; //默认选中所有通道
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //切换通道
    changeChannelId(val) {},
    //获取图片
    getTerminalPhotoList(id, date, termId) {
      this.terminalPhoto = [];
      console.log(id, date, termId);
      getTerminalPhotoListJoggle({
        channelid: id,
        time: date,
        terminalid: termId,
      })
        .then((res) => {
          console.log(res);
          this.terminalPhoto = res.data.list;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },

    //拖拽
    dragControllerDiv() {
      var resize = document.getElementsByClassName("resize");
      var left = document.getElementsByClassName("sideBar");
      var mid = document.getElementsByClassName("picSetBox");
      var box = document.getElementsByClassName("monitor-container");
      for (let i = 0; i < resize.length; i++) {
        // 鼠标按下事件
        resize[i].onmousedown = function (e) {
          //颜色改变提醒
          resize[i].style.background = "#128071";
          var startX = e.clientX;
          resize[i].left = resize[i].offsetLeft;
          // 鼠标拖动事件
          document.onmousemove = function (e) {
            var endX = e.clientX;
            var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
            var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

            if (moveLen < 290) moveLen = 290; // 左边区域的最小宽度为32px
            if (moveLen > maxT - 600) moveLen = maxT - 600; //右边区域最小宽度为150px

            resize[i].style.left = moveLen; // 设置左侧区域的宽度

            for (let j = 0; j < left.length; j++) {
              left[j].style.width = moveLen + "px";
              mid[j].style.width = box[i].clientWidth - moveLen - 3 + "px";
            }
          };
          // 鼠标松开事件
          document.onmouseup = function (evt) {
            //颜色恢复
            resize[i].style.background = "#dcdfe6";
            document.onmousemove = null;
            document.onmouseup = null;
            resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          };
          resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false;
        };
      }
    },
  },

  destroyed() {
    clearInterval(this.treetimer);
    this.treetimer = null;
    //离开页面是销毁
    // if (this.timer) {
    //   console.log(this.timer);
    //   clearInterval(this.timer);
    //   this.timer = null;
    // } //利用vue的生命周期函数
  },
};
</script>

<style lang="less">
.realMonitor {
  width: calc(100% - 0px);
  height: calc(100% - 12px);
  padding: 12px 0px 0px 0px;
  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;
      display: flex;
      flex-direction: column;
      padding: 16px 0px;
      .searchBar {
        width: 94%;
        margin: 0 auto;
        margin-bottom: 8px;
      }
      .deviceNum {
        width: 94%;
        margin: 0 auto;
        margin-bottom: 8px;
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        .el-statistic {
          display: flex;
          justify-content: center;
          align-items: center;
          .head {
          }
          .con {
            color: #169e8c;
          }
        }
      }
      .el-tree {
        overflow: auto;
        .el-tree-node__content {
          height: 32px;
          font-size: 12px;
        }
        .custom-tree-node {
          color: #333;
        }
      }

      .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content {
        // 设置颜色
        color: #fff;
        background: #169e8c;
        .custom-tree-node {
          color: #fff;
        }
      }

      .disconnect {
        color: #d3d3d3;
      }
    }
    /*拖拽区div样式*/
    .resize {
      cursor: col-resize;
      float: left;
      position: relative;
      background-color: #dcdfe6;
      width: 3px;
      height: 100%;
      /*拖拽区鼠标悬停样式*/
      &:hover {
        background-color: #169e8c;
      }
    }

    .picSetBox {
      display: flex;
      width: 100%;
      height: 100%;
      //background: #fcc;
      flex: 1;
      overflow: hidden;
      border-left: 1px solid @border-color-base;
      .swiperBox {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: auto;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        .title {
          height: 32px;
          padding-left: 12px;
          line-height: 32px;
          color: #fff;
          font-size: 12px;
          background-color: #169e8cb0;
          .el-breadcrumb {
            line-height: 32px;
            color: #fff !important;
            font-size: 12px;
            height: 32px;
            .el-breadcrumb__inner,
            .el-breadcrumb__separator {
              color: #fff !important;
            }
          }
        }
      }
      .parameterArea {
        width: 220px;
        padding: 0px 8px;
        border-left: 1px solid #dcdfe6;
        position: relative;
        .zzbox {
          height: 32px;
          line-height: 32px;
          color: #169e8c;
          font-size: 14px;
          font-weight: normal;
          margin-bottom: 16px;
          //background-color: #169e8cb0;
        }
        .paramsDate,
        .monitorItemBox {
          margin-bottom: 16px;
          position: relative;
          h3 {
            font-size: 14px;
            font-weight: normal;
            color: @color-text-primary;
            margin-bottom: 8px;
          }
        }
      }
    }
  }
}
</style>