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>
        <div class="radioFilter">
          <el-radio-group v-model="zzradio" @input="getRadio">
            <el-radio :label="-1">全部</el-radio>
            <el-radio :label="1">在线</el-radio>
            <el-radio :label="0">离线</el-radio>
          </el-radio-group>
          <el-button
            class="refresh"
            @click="getLineTreeStatus"
            type="text"
            icon="el-icon-refresh-right"
            >刷新</el-button
          >
        </div>
        <el-tree
          ref="tree"
          :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-shexiangtoulixian"
                v-if="data.onlinestatus == 0"
                :class="data.onlinestatus == 0 ? 'disconnect' : ''"
                style="margin-right: 6px"
              ></span>
              <span
                class="iconfont icon-shexiangtou-lixian"
                v-else
                :class="data.onlinestatus == 0 ? 'disconnect' : ''"
                style="margin-right: 6px"
              ></span>
              <span
                :id="data.id"
                :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-show="LineFlag">
        <!-- 预览图页面 -->
        <previewContain
          ref="previewRef"
          :previewData="previewData"
        ></previewContain>
      </div>
      <!-- 带参数的中心内容右侧参数区 -->
      <div class="picSetBox" v-show="towerFlag">
        <div class="swiperBox" v-loading="swiperLoading">
          <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 日"
              :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 class="setTimebtn">
            <h3>操作项</h3>
            <div class="buttonGroup">
              <el-dropdown trigger="click" @command="handleCommandpic">
                <el-button type="primary" :loading="btnpicloading">
                  主动拍照<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown" class="picdropStyle">
                  <el-dropdown-item
                    :command="item.value"
                    v-for="(item, index) in channelOption"
                    :key="index"
                    >{{
                      item.alias !== null && item.alias !== ""
                        ? item.alias
                        : item.label
                    }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown trigger="click" @command="handleCommandvideo">
                <el-button type="primary" :loading="btnvideoloading">
                  主动录像<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown" class="videodropStyle">
                  <el-dropdown-item
                    :command="item.value"
                    v-for="(item, index) in channelOption"
                    :key="index"
                    >{{
                      item.alias !== null && item.alias !== ""
                        ? item.alias
                        : item.label
                    }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>

              <el-button type="primary" @click="handleShowInfo">
                装置信息</el-button
              >
              <el-button type="primary" @click.native.stop="handleSetSchedule()"
                >拍照时间表</el-button
              >

              <el-dropdown
                class="dropgps"
                trigger="click"
                @command="handleCommandWarn"
              >
                <el-button type="primary">
                  声光报警<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown" class="gpsdropStyle">
                  <el-dropdown-item command="open">开启</el-dropdown-item>
                  <el-dropdown-item command="close">关闭</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <!-- 线缆显示 -->
              <el-dropdown
                class="dropgps"
                trigger="click"
                @command="handleCommandLine"
              >
                <el-button type="primary">
                  线缆显示<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown" class="gpsdropStyle">
                  <el-dropdown-item command="open">开启</el-dropdown-item>
                  <el-dropdown-item command="close">关闭</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <!-- 获取gps位置 -->
              <el-button type="primary" @click.native.stop="handleShowGPS()"
                >获取GPS位置</el-button
              >
              <!-- gps开关 -->
              <el-dropdown
                class="dropgps"
                trigger="click"
                @command="handleCommandGps"
              >
                <el-button type="primary">
                  GPS开关<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown" class="gpsdropStyle">
                  <el-dropdown-item command="open">开启GPS</el-dropdown-item>
                  <el-dropdown-item command="close">关闭GPS</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-button type="primary" @click="handlehistoryPic">
                历史图片</el-button
              >
            </div>
          </div>
          <div class="setfocalLength" v-if="zzprotocol == '65286'">
            <h3>焦距调节</h3>
            <div class="selectChannel">
              <span class="labelname">选择通道</span>
              <el-select
                v-model="channelarrValue"
                placeholder="请选择通道"
                @change="changeChannelarrValue"
                ref="multiSelect"
              >
                <el-option
                  v-for="item in channelOption"
                  :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 class="buttonGroup">
              <el-button
                type="primary"
                icon="el-icon-zoom-in"
                @click="amplify()"
                >放大</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-zoom-out"
                @click="reduce()"
                >缩小</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <setschedule ref="setschedule_ref"></setschedule>
    <info-dialog ref="infodialog_ref"></info-dialog>
    <gps-position ref="gpsdialog_ref"></gps-position>
  </div>
</template>

<script>
import {
  getdyTreeListJoggle,
  getChannelByTermidJoggle,
  getTerminalPhotoListJoggle,
  getTermStatus,
  alarmMarkJoggle,
  takePicJoggle,
  getTakePicPhotoStatusJoggle,
  getTakePicStatusJoggle,
  setTermGPSJoggle,
  updateTermCamera,
} from "@/utils/api/index";
import previewContain from "./previewContain.vue";
import carouselChart from "../components/carouselChart.vue";
import setschedule from "./components/setschedule.vue";
import infoDialog from "./components/infoDialog.vue";
import gpsPosition from "./components/gpsPosition.vue";
import { number } from "echarts";
export default {
  components: {
    previewContain,
    carouselChart,
    setschedule,
    infoDialog,
    gpsPosition,
  },
  data() {
    return {
      btnpicloading: false,
      btnvideoloading: false,
      onlinestatus: "", //设备状态啊
      onlineNum: "", //在线数
      totalNum: "", //装置总数
      selectData: "", //点击选中的数据
      type: "", //选中的类型
      lineTreeData: [],
      filterText: "",
      searchName: "",
      defaultProps: {
        //指定参数格式回显数据
        children: "list",
        label: "name",
      },
      currentNodekey: "", //默认选中的节点树,
      previewData: [], //预览图数据
      page: 1, // 当前页数
      treetimer: null, //轮询状态timer
      LineFlag: true,
      towerFlag: false, //判断是否是图片list
      towertitle: "", //装置杆塔信息
      terminalPhoto: [], //获取装置当前图片数据
      nopicPath: require("@/assets/img/nopic.jpg"),
      swiperLoading: false,
      zzCmdid: "",
      zztermId: "",
      zzprotocol: "", //装置规约
      dateValue: "", //选择日期
      pickerOptions: {
        disabledDate(date) {
          return date.getTime() > Date.now(); // 禁用大于今天的日期
        },
      },
      channelListOption: [], //通道内容
      channelOption: [], //主动拍照通道
      channelarr: [],
      channelarrValue: null,
      selectChannelValue: null, //选中的通道
      channelId: "", //选中的通道id
      btnpicloading: false, //主动拍照按钮loading
      requestId: "", //请求拍照返回的requestid
      picTime: "", //请求拍照返回的时间
      timer: null, //获取最新图片
      i: 0, //获取最新图片
      CurrentData: "", //历史图片当前选中数据

      statusNum: 0, //查询下发状态
      statusTimer: null, //查询下发状态
      selectDyId: "", //获取当前选中的电压线路等信息
      selectLineId: "",
      selectTowerId: "",
      currentData: "", //保存选中的数据
      zzradio: -1,
    };
  },
  watch: {
    filterText(val) {
      console.log(val);
      this.$refs.tree.filter(val);
      console.log(this.$refs.tree);
    },
  },
  computed: {},
  mounted() {
    this.dragControllerDiv();
    this.getDateTime();
  },
  created() {
    //获取日期
    this.zzradio = JSON.parse(localStorage.getItem("radio"));
    this.getRadio();
    this.getLineTreeList();
    this.treetimer = window.setInterval(() => {
      setTimeout(this.getLineTreeStatus(), 0);
    }, 300000);
  },
  methods: {
    //获取当前选中的radio
    getRadio() {
      console.log(this.zzradio);
      localStorage.setItem("radio", JSON.stringify(this.zzradio));
      this.getLineTreeStatus();
    },
    //获取当前时间
    getDateTime() {
      console.log(new Date());
      this.dateValue = new Date().getTime();
      console.log(this.dateValue);
    },
    // //选择时间
    // changedate() {
    //   console.log(this.dateValue);
    // },
    //点击当前选中的treenode
    handleNodeClick(data) {
      this.clearfun();
      console.log(data);
      this.selectData = data;
      this.zztermId = data.id;
      this.zzprotocol = data.protocol;
      this.CurrentData = data;
      //this.previewData = data;
      if (data.dyValue) {
        this.LineFlag = true;
        this.towerFlag = false;
        console.log("电压");
        this.type = 1;
        //this.getPicList(data.id, this.type);
        this.$refs.previewRef.getPicList(data.id, this.type, this.page);
      } else if (data.bsManufacturer) {
        this.LineFlag = true;
        this.towerFlag = false;
        console.log("线路");
        this.type = 2;
        this.$refs.previewRef.getPicList(data.id, this.type, this.page);
        //this.getPicList(data.id, this.type);
      } else {
        console.log("杆塔");
        this.LineFlag = false;
        this.towerFlag = true;
        this.towertitle = data.name;
        this.zzCmdid = data.cmdid;
        this.getChannelList(data.id);

        // this.getTerminalPhotoList(id, date, data.id);
      }
      localStorage.setItem("currentData", JSON.stringify(this.selectData));
    },
    //轮询获取装置状态
    getLineTreeStatus() {
      console.log("11111111");
      console.log(this.filterText);
      if (this.filterText !== "") {
        this.$refs.tree.filter(this.filterText);
      } else {
        getdyTreeListJoggle({ type: this.zzradio })
          .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, node) {
      //console.log(value, data, node);
      this.filterText = value;
      console.log(this.filterText);
      // 如果什么都没填全部匹配全部返回
      if (!value) return true;
      this.searchName = data.name + data.cmdid;
      //console.log(this.searchName);
      // 如果传入的value和data中的label相同，匹配成功
      if (this.searchName.indexOf(value) !== -1) {
        return true;
      }
    },
    //获取左侧树结构
    getLineTreeList() {
      console.log(this.zzradio);
      getdyTreeListJoggle({ type: this.zzradio })
        .then((res) => {
          console.log(res);
          this.lineTreeData = res.data.list;
          console.log(this.lineTreeData);

          this.onlineNum = res.data.onlineNum;
          this.totalNum = res.data.totalNum;
          this.currentData = JSON.parse(localStorage.getItem("currentData"));
          console.log(this.currentData);
          if (this.lineTreeData[0].list[0].list.length > 0) {
            console.log("diyici");
            if (
              this.currentData !== null &&
              Object.keys(this.currentData).length !== 0
            ) {
              console.log("aaa");
              this.currentNodekey = this.currentData.id;
              this.handleNodeClick(this.currentData);
            } else {
              console.log("diyici");
              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.channelId = this.currentNodekey;
              this.$refs.previewRef.getPicList(
                this.currentNodekey,
                this.type,
                this.page
              );
            }

            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
            });
          }
          // if (this.zzradio == -1) {
          //   this.lineTreeData = this.lineTreeData;
          // } else if (this.zzradio == 1) {
          //   //在线
          //   var data = JSON.parse(JSON.stringify(this.lineTreeData));
          //   console.log(data);
          //   const filterId = (data, id) => {
          //     if (!Array.isArray(data)) {
          //       return data;
          //     }
          //     return data.filter((item) => {
          //       if ("list" in item) {
          //         item.list = filterId(item.list, id);
          //       }
          //       return item.onlinestatus !== 0;
          //     });
          //   };
          //   const filtredData = filterId(data);
          //   console.log(filtredData);
          //   this.lineTreeData = filtredData;
          // } else if (this.zzradio == 0) {
          //   //离线
          //   var data = JSON.parse(JSON.stringify(this.lineTreeData));
          //   console.log(data);
          //   const filterId = (data, id) => {
          //     if (!Array.isArray(data)) {
          //       return data;
          //     }
          //     return data.filter((item) => {
          //       if ("list" in item) {
          //         item.list = filterId(item.list, id);
          //       }
          //       return item.onlinestatus !== 1;
          //     });
          //   };
          //   const filtredData = filterId(data);
          //   console.log(filtredData);
          //   this.lineTreeData = filtredData;
          // }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },

    //获取通道的接口
    getChannelList(id) {
      getChannelByTermidJoggle({ termid: id })
        .then((res) => {
          console.log(res);
          this.channelList = res.data.list;
          this.channelarr = res.data.list;
          if (this.channelList.length == 0) {
            console.log("没有通道");
            this.getTerminalPhotoList(-1, this.dateValue, this.zztermId); //获取图片列表是传当前设备的 id 和termid
          } else {
            console.log(this.channelList);
            this.channelOption = [];

            this.channelList.forEach((item) => {
              this.channelOption.push({
                label: item.channelname,
                value: item.channelid,
                termid: item.termId,
                alias: item.alias,
              });
            }); // 选择通道一通道二select框
            console.log(this.channelOption);
            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; //默认选中所有通道
            this.channelarrValue = this.channelOption[0].value;
            this.getTerminalPhotoList(
              this.selectChannelValue,
              this.dateValue,
              this.channelList[0].termId
            ); //获取图片列表是传当前设备的 id 和termid
            this.selectDyId = res.data.dyId;
            this.selectLineId = res.data.lineId;
            this.selectTowerId = res.data.towerId;
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //切换通道
    changeChannelId(val) {
      console.log(val);
      this.getTerminalPhotoList(val, this.dateValue, this.zztermId);
    },
    //焦距切换通道
    changeChannelarrValue(val) {
      console.log(val);
    },
    //选择时间
    changedate() {
      console.log(this.dateValue.getTime());
      console.log(this.zztermId);
      this.getTerminalPhotoList(
        this.selectChannelValue,
        this.dateValue,
        this.zztermId
      );
    },
    //获取图片
    getTerminalPhotoList(id, date, termId) {
      this.clearfun();
      this.terminalPhoto = [];
      console.log(id, date, termId);
      this.swiperLoading = true;
      getTerminalPhotoListJoggle({
        channelid: id,
        time: date,
        terminalid: termId,
      })
        .then((res) => {
          console.log(res);
          this.swiperLoading = false;
          if (res.data.list.length == 0) {
            this.terminalPhoto = [
              {
                path: this.nopicPath,
                termId: termId,
                mediatype: 0,
              },
            ];
          } else {
            this.terminalPhoto = res.data.list;
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //点击图片列表执行函数
    jumpTowerPic(data) {
      console.log("我是从子组件过来的数据");
      console.log(data);
      this.LineFlag = false;
      this.towerFlag = true;
      this.zzCmdid = data.cmdid;
      this.towertitle = data.towername;
      this.zztermId = data.termid;
      this.selectChannelValue = data.channnelname;
      this.$refs.tree.setCurrentKey(this.zztermId); //一定要加这个选中了否则样式没有出来
      this.selectedRegion(this.zztermId);
      if (data.photoTime == "" || data.photoTime == null) {
        this.getDateTime();
      } else {
        this.dateValue = data.photoTime;
      }
      console.log(this.selectChannelValue);
      // this.getChannelList(this.zztermId);
      getChannelByTermidJoggle({ termid: this.zztermId })
        .then((res) => {
          console.log(res);
          this.channelList = res.data.list;
          console.log(this.channelList);
          this.channelOption = [];
          this.channelList.forEach((item) => {
            this.channelOption.push({
              label: item.channelname,
              value: item.channelid,
              termid: item.termId,
              alias: item.alias,
            });
          }); // 选择通道一通道二select框
          console.log(this.channelOption);
          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 = data.channnelname;
          this.getTerminalPhotoList(
            data.channelid,
            this.dateValue,
            this.zztermId
          ); //获取图片列表是传当前设备的 id 和termid
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
      //this.getTerminalPhotoList(data.channelid, this.dateValue, this.zztermId);
    },
    selectedRegion(id) {
      console.log("滚动到选中定位的位置");
      // 通过Id获取到对应的dom元素
      const node = document.getElementById(id);
      setTimeout(() => {
        if (node) {
          this.$nextTick(() => {
            // 通过scrollIntoView方法将对应的dom元素定位到可见区域 【block: 'center'】这个属性是在垂直方向居中显示
            console.log(node);
            node.scrollIntoView({ block: "center" });
          });
        }
      }, 100);
    },
    //主动拍照
    handleCommandpic(command) {
      console.log(command);
      getTermStatus({ termId: this.zztermId }).then((res) => {
        console.log(res);
        if (res.data.isonline) {
          takePicJoggle({
            captureType: 0,
            channel: command,
            termId: this.zztermId,
            preset: 255,
          })
            .then((res) => {
              console.log(res);
              this.requestId = res.data.requestId; //获取requestid 判断装置是否下发
              this.picTime = res.data.taketime; //获取时间 判断获取最新图片
              console.log(this.requestId);
              console.log(this.picTime);
              this.btnpicloading = true;
              this.statusTimer = window.setInterval(() => {
                this.getTakePicStatus(res.data);
                this.statusNum++;
              }, 3000);
            })
            .catch((err) => {
              console.log(err); //代码错误、请求失败捕获
            });
        } else {
          this.$message({
            duration: 1500,
            showClose: true,
            message: "装置下线，发送指令失败",
            type: "error",
          });
        }
      });
    },
    //主动拍视频
    handleCommandvideo(command) {
      console.log(command);
      this.clearfun();
      getTermStatus({ termId: this.zztermId }).then((res) => {
        console.log(res);
        if (res.data.isonline) {
          takePicJoggle({
            captureType: 1,
            channel: command,
            termId: this.zztermId,
            preset: 255,
          })
            .then((res) => {
              console.log(res);
              this.requestId = res.data.requestId; //获取requestid 判断装置是否下发
              this.picTime = res.data.taketime; //获取时间 判断获取最新视频
              console.log(this.requestId);
              this.btnvideoloading = true;
              this.getTakePicStatus(res.data);
              this.statusTimer = window.setInterval(() => {
                this.getTakePicStatus(res.data);
                this.statusNum++;
              }, 2000);
            })
            .catch((err) => {
              console.log(err); //代码错误、请求失败捕获
            });
        } else {
          this.$message({
            duration: 1500,
            showClose: true,
            message: "装置下线，发送指令失败",
            type: "error",
          });
        }
      });
    },

    //获取装置是否下发状态
    getTakePicStatus(data) {
      console.log(data);
      getTakePicStatusJoggle({
        requestid: data.requestId,
        termId: this.zztermId,
        photoTime: new Date(data.taketime).getTime(),
      })
        .then((res) => {
          console.log(res);
          //res.data  0 状态未知  1 成功 2失败
          if (
            res.data.cmaStatus == 0 &&
            res.data.picStatus == false &&
            this.statusNum >= 5
          ) {
            this.statusNum = 0;
            clearInterval(this.statusTimer);
            this.statusTimer = null;
            this.btnpicloading = false;
            this.btnvideoloading = false;
            this.$message({
              duration: 1500,
              showClose: true,
              message: "下发指令超时，请重试！",
              type: "warning",
            });
          } else if (res.data.cmaStatus == 1 || res.data.picStatus == true) {
            this.statusNum = 0;
            this.btnpicloading = false;
            this.btnvideoloading = false;
            clearInterval(this.statusTimer);
            this.statusTimer = null;
            this.$message({
              duration: 1500,
              showClose: true,
              message: "下发指令成功！",
              type: "success",
            });
            this.timer = window.setInterval(() => {
              this.newPicApi();
              this.i++;
            }, 8000);
          } else if (res.data.cmaStatus == 2) {
            this.statusNum = 0;
            this.btnpicloading = false;
            this.btnvideoloading = false;
            clearInterval(this.statusTimer);
            this.statusTimer = null;
            this.$message({
              duration: 1500,
              showClose: true,
              message: "下发指令失败！",
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //获取最新图片
    newPicApi() {
      getTakePicPhotoStatusJoggle({
        photoTime: new Date(this.picTime).getTime(),
        termId: this.zztermId,
        requestid: this.requestId,
      }).then((res) => {
        console.log(res.data);
        // // console.log(this.i);
        if (res.data == true && this.i < 10) {
          console.log(res.data);
          this.i = 0;
          clearInterval(this.timer);
          this.timer = null;
          this.btnpicloading = false;
          this.btnvideoloading = false;
          this.getTerminalPhotoList(
            this.selectChannelValue,
            this.dateValue,
            this.zztermId
          ); //获取图片列表是传当前设备的 id 和termid
          this.$message({
            duration: 1500,
            showClose: true,
            message: "已返回最新图片！",
            type: "success",
          });
          console.log("返回最新图片");
        } else if (res.data == false && this.i > 10) {
          this.i = 0;
          clearInterval(this.timer);
          this.timer = null;
        }
      });
    },
    //声光报警开启关闭
    handleCommandWarn(command) {
      switch (command) {
        case "open": //开启
          this.handleWarn(1);
          break;
        case "close": //关闭
          this.handleWarn(0);
          break;
      }
    },
    //声光报警
    handleWarn(val) {
      console.log("声光报警");
      console.log(this.zztermId);
      this.clearfun();
      getTermStatus({ termId: this.zztermId }).then((res) => {
        console.log(res);
        if (res.data.isonline) {
          alarmMarkJoggle({
            cmdId: this.zzCmdid,
            ctrl: val,
            termId: this.zztermId,
          })
            .then((res) => {
              console.log(res);
              if (res.code == 200) {
                if (val == 1) {
                  this.$message({
                    duration: 1500,
                    showClose: true,
                    message: "声光报警开启成功",
                    type: "success",
                  });
                } else {
                  this.$message({
                    duration: 1500,
                    showClose: true,
                    message: "声光报警关闭成功",
                    type: "success",
                  });
                }
              }
            })
            .catch((err) => {
              this.$message({
                duration: 1500,
                showClose: true,
                message: "声光报警操作失败",
                type: "error",
              });
            });
        } else {
          this.$message({
            duration: 1500,
            showClose: true,
            message: "装置下线，发送指令失败",
            type: "error",
          });
        }
      });
    },
    //设置时间表
    handleSetSchedule() {
      this.clearfun();
      this.$refs.setschedule_ref.display();
      this.$refs.setschedule_ref.getSingleAccess(
        this.zztermId,
        this.zzCmdid,
        this.zzprotocol
      );
      this.$refs.setschedule_ref.deviceList();
    },
    //线缆显示
    handleCommandLine(command) {
      this.clearfun();
      switch (command) {
        case "open": //开启
          this.$refs.carouselpic.openline();
          break;
        case "close": //关闭
          this.$refs.carouselpic.handelClear();
          break;
      }
    },
    //装置信息handleShowInfo
    handleShowInfo() {
      this.clearfun();
      getTermStatus({ termId: this.zztermId }).then((res) => {
        console.log(res);
        if (res.data.isonline) {
          this.$refs.infodialog_ref.display(this.zztermId, this.zzCmdid);
          this.$refs.infodialog_ref.getinfo();
          //this.$refs.infodialog_ref.getListData(this.channelId, this.cmdid);
        } else {
          this.$message({
            duration: 1500,
            showClose: true,
            message: "装置下线，发送指令失败",
            type: "error",
          });
        }
      });
    },
    //获取GPS位置
    handleShowGPS() {
      this.clearfun();
      this.$refs.gpsdialog_ref.display(this.zzCmdid, this.zztermId);
      this.$refs.gpsdialog_ref.getgpssql();
    },
    //切换gps开启关闭
    handleCommandGps(command) {
      switch (command) {
        case "open": //开启
          this.changeGPS(1, this.zzCmdid);
          break;
        case "close": //关闭
          this.changeGPS(0, this.zzCmdid);
          break;
      }
    },
    changeGPS(val, cmdid) {
      console.log(val, cmdid);
      this.clearfun();
      setTermGPSJoggle({ gpsstatus: val, cmdId: cmdid })
        .then((res) => {
          console.log(res);
          if (val == 0) {
            this.$message({
              duration: 1500,
              message: "GPS已关闭",
              type: "warning",
              showClose: true,
            });
          } else {
            this.$message({
              duration: 1500,
              message: "成功开启GPS",
              type: "success",
              showClose: true,
            });
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //历史图片跳转
    handlehistoryPic() {
      //console.log(this.CurrentData);

      console.log(this.selectDyId, this.selectLineId, this.selectTowerId);
      console.log(this.zzCmdid, this.selectChannelValue);

      if (typeof this.dateValue == "number") {
        console.log(this.dateValue);
        console.log(new Date(new Date().toLocaleDateString()).getTime());
        // var newDateValue = this.dateValue.toString();
        // this.dateValue = newDateValue.slice(0, -3) + "000";
        this.dateValue = new Date(new Date().toLocaleDateString()).getTime();
        console.log(1689782400000);
      } else {
        this.dateValue = this.dateValue.getTime();
      }

      this.$router.push({
        path: "/realTimeSearch",
        query: {
          dyId: this.selectDyId,
          lineId: this.selectLineId,
          towerId: this.selectTowerId,
          termId: this.zztermId,
          cmdId: this.zzCmdid,
          channelId: this.selectChannelValue,
          date: this.dateValue,
        },
      });
      // sessionStorage.setItem("keyPath", " realTimeSearch");
      this.clearfun();
    },
    //拖拽
    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;
        };
      }
    },
    clearfun() {
      console.log("清除轮询");
      this.statusNum = 0;
      this.i = 0;
      //销毁主动拍照
      clearInterval(this.statusTimer);
      this.statusTimer = null;
      if (this.timer) {
        console.log(this.timer);
        clearInterval(this.timer);
        this.timer = null;
      } //利用vue的生命周期函数
    },
    //焦距放大缩小
    amplify() {
      getTermStatus({ termId: this.zztermId }).then((res) => {
        console.log(res);
        if (res.data.isonline) {
          updateTermCamera({
            termId: this.zztermId,
            channelId: this.channelarrValue,
            type: 6,
          })
            .then((res) => {})
            .catch();
          //this.$refs.infodialog_ref.getListData(this.channelId, this.cmdid);
        } else {
          this.$message({
            duration: 1500,
            showClose: true,
            message: "装置下线，发送指令失败",
            type: "error",
          });
        }
      });
      console.log(this.channelarrValue, this.zztermId);
    },
    //焦距缩小
    reduce() {
      getTermStatus({ termId: this.zztermId }).then((res) => {
        console.log(res);
        if (res.data.isonline) {
          updateTermCamera({
            termId: this.zztermId,
            channelId: this.channelarrValue,
            type: 7,
          })
            .then((res) => {})
            .catch();
          //this.$refs.infodialog_ref.getListData(this.channelId, this.cmdid);
        } else {
          this.$message({
            duration: 1500,
            showClose: true,
            message: "装置下线，发送指令失败",
            type: "error",
          });
        }
      });
    },
  },

  destroyed() {
    //销毁左侧树状图
    clearInterval(this.treetimer);
    this.treetimer = null;
    //销毁主动拍照
    clearInterval(this.statusTimer);
    this.statusTimer = 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: 12px;
        .el-statistic {
          display: flex;
          justify-content: center;
          align-items: center;
          .head {
          }
          .con {
            color: #169e8c;
          }
        }
      }
      .radioFilter {
        width: 94%;
        margin: 0 auto;
        margin-bottom: 8px;
        font-size: 12px;
        display: flex;
        justify-content: space-around;
        .refresh {
        }
        .el-radio-group {
          display: flex;
          align-items: center;
          justify-content: center;
          .el-radio {
            margin-right: 16px;
          }
        }
      }
      .el-tree {
        overflow-y: auto;
        overflow-x: hidden;
        .el-tree-node__content {
          height: 32px;
          font-size: 12px;
        }
        .custom-tree-node {
          color: #333;
          overflow: hidden;
          span {
            display: flex;
            display: inline-table;
            overflow: hidden;
          }
        }
      }

      .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content {
        // 设置颜色
        color: #fff;
        background: #169e8c;
        .custom-tree-node {
          color: #fff;
          //overflow: hidden;
          span {
            display: flex;
            //overflow: hidden;
            .iconfont {
              //width: 30px;
              display: inline-table;
            }
          }
        }
      }

      .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;
          background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
          .el-breadcrumb {
            line-height: 32px;
            color: #fff !important;
            font-size: 14px;
            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,
        .setTimebtn,
        .setfocalLength {
          margin-bottom: 16px;
          position: relative;
          h3 {
            font-size: 14px;
            font-weight: normal;
            color: @color-text-primary;
            margin-bottom: 8px;
          }
        }
        .setTimebtn {
          .buttonGroup {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .el-button {
              margin-bottom: 8px;
              width: 104px;
            }
            .el-button + .el-button {
              margin-left: 0px;
            }
          }
        }
        .setfocalLength {
          .selectChannel {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            .labelname {
              font-size: 14px;
              margin-right: 4px;
              width: 80px;
              color: #666;
            }
          }
          .buttonGroup {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .el-button {
              margin-bottom: 8px;
              width: 104px;
            }
            .el-button + .el-button {
              margin-left: 0px;
            }
          }
        }
      }
    }
  }
}
.picdropStyle,
.videodropStyle,
.gpsdropStyle {
  width: 104px;
  margin-top: 0px !important;
}
</style>