frontend/src/views/realTimeMonitor/index.vue

<template>
  <div class="monitorBox" v-loading="loadingBg">
    <div class="monitor-container">
      <!-- 左侧数据列表树 -->
      <div class="sideBar">
        <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="node.level === 1" class="iconfont icon-dianli"></span>
            <span
              v-else-if="data.list && node.level !== 1"
              class="iconfont icon-dianlihangye"
            >
            </span>
            <span
              v-else
              class="iconfont icon-video-camera"
              style="margin-right: 6px"
            ></span>
            <span>{{ node.label }}</span>
          </span>
        </el-tree>
      </div>
      <!-- 带参数的中心内容右侧参数区 -->
      <div class="picSetBox" v-loading="loading">
        <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"
              multiple
            >
              <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" @click="handleShowPic"
                >手动拍照</el-button
              >
              <el-button type="primary" @click="handleShowGPS"
                >获取GPS位置</el-button
              >
              <el-button type="primary" @click="handleShowErr">
                装置信息</el-button
              >
              <el-dropdown
                class="dropgps"
                trigger="click"
                @command="handleCommand"
              >
                <el-button type="primary">
                  GPS开关<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <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="handleShowErr"
                >声光报警</el-button
              >
              <el-button type="primary" @click="handleShowErr"
                >历史图片</el-button
              >

              <!-- <el-button type="primary" @click="handlePanel"
                >图片标记</el-button
              > -->
              <!--  -->
              <!--
              <el-button type="primary" @click="handleUpGrade"
                >远程升级</el-button
              > -->
            </div>
          </div>
        </div>
      </div>
      <setschedule ref="setschedule_ref"></setschedule>
      <!-- 装置升级 -->
      <!-- <deviceUpgrade ref="deviceupgrade_ref"></deviceUpgrade> -->
      <!-- 绘制图片 -->
      <pictureTags ref="pictureTags_ref"></pictureTags>
    </div>
  </div>
</template>

<script>
import {
  getdyTreeListJoggle,
  getChannelByTermidJoggle,
  getTerminalPhotoListJoggle,
  getTermGPSJoggle,
  setTermGPSJoggle,
  getLatestPhotoJoggle,
} from "@/utils/api/index";
import carouselChart from "../components/carouselChart.vue";
import setschedule from "./components/setschedule.vue";
import deviceUpgrade from "./components/deviceUpgrade.vue";
import pictureTags from "./components/pictureTags.vue";
export default {
  components: {
    carouselChart,
    setschedule,
    deviceUpgrade,
    pictureTags,
  },
  data() {
    return {
      showBigPic: true,
      defaultKey: "",
      lineTreeData: [],
      defaultProps: {
        //指定参数格式回显数据
        children: "list",
        label: "name",
      },
      currentNodekey: "", //默认选中的节点树,
      cmdid: "", //装置id,
      id: "", //通道装置id
      channelList: "", //通道数据
      channelOption: [], //通道分类
      channelValue: [],
      terminalPhoto: [], //获取拍照装置当前数据
      dateValue: "", //日期
      nopicPath: require("@/assets/img/nopic.jpg"),
      loadingBg: true,
      loading: true,
      GPSValue: "",
      GpsOption: [
        {
          value: "1",
          label: "开启",
        },
        {
          value: "0",
          label: "关闭",
        },
      ],
    };
  },
  watch: {},

  mounted() {},
  created() {
    this.getLineTreeList();
    this.getDateTime();
  },
  methods: {
    //获取当前时间
    getDateTime() {
      this.dateValue = new Date().getTime();
    },
    //选择时间
    changedate() {
      console.log(this.channelList);
      this.getTerminalPhotoList(
        this.channelList[0].channelid,
        this.dateValue,
        this.channelList[0].termId
      );
    },
    //获取左侧树结构
    getLineTreeList() {
      this.loadingBg = true;
      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.cmdid = this.lineTreeData[0].list[0].list[0].cmdid;
            console.log(this.cmdid);
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
              console.log(this.currentNodekey);
              this.id = this.currentNodekey;
              console.log(this.id);
              this.getChannelList(this.id); //获取通道id接口
            });
          }
          this.loadingBg = false;
        })
        .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.loading = true;
      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,
              },
            ];
          } else {
            this.terminalPhoto = res.data.list;
          }
          this.loading = false;
          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();
    },
    handleShowErr() {
      this.$message({
        message: "该功能暂未开发,敬请期待",
        type: "warning",
      });
    },
    //装置升级
    // handleUpGrade() {
    //   this.$refs.deviceupgrade_ref.display();
    // },
    //切换gps开启关闭
    changeGPS(val) {
      console.log(val);
      setTermGPSJoggle({ gpsstatus: val, termid: this.channelId })
        .then((res) => {
          console.log(res);
          if (val == 0) {
            this.$message("关闭GPS");
          } else {
            this.$message({
              message: "成功开启GPS",
              type: "success",
            });
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    handleCommand(command) {
      switch (command) {
        case "open": //开启
          this.changeGPS(1);
          break;
        case "close": //关闭
          this.changeGPS(0);
          break;
      }
    },
    //获取GPS位置
    handleShowGPS() {
      getTermGPSJoggle({ termId: this.channelId })
        .then((res) => {
          console.log(res);
          this.$alert(
            "<p><label>经度:</label><span>" +
              `${res.data.longitude}` +
              "</span></p><p><label>纬度:</label><span>" +
              `${res.data.latitude}` +
              "</span></p><p><label>半径:</label><span>" +
              `${res.data.radius}` +
              "</span></p>",
            "GPS位置",
            {
              dangerouslyUseHTMLString: true,
              customClass: "messageGps",
            }
          );
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //手动拍照
    handleShowPic() {
      console.log(this.channelId);
      console.log(this.cmdid);
      getLatestPhotoJoggle({
        captureType: 0,
        channel: this.channelId,
        cmdid: this.cmdid,
        preset: 255,
      })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //图片绘制
    handlePanel() {
      //const nodes = this.$refs.tree.getNode(this.currentNodekey).data; //若节点可被选择，则返回目前被选中的节点所组成的数组
      //获取当前电压等级，线路名称和装置名称
      // let pannelParmas = {};
      // pannelParmas.push({});
      console.log(this.channelOption);

      this.$refs.pictureTags_ref.display();
    },
  },
};
</script>

<style lang="less">
.monitorBox {
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  padding: 16px 16px;
  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;
          font-size: 12px;
        }
      }
      .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;
      position: relative;
      .monitorItemBox,
      .paramsDate,
      .setTimebtn,
      .GPSItemBox {
        margin-bottom: 16px;
        h3 {
          font-size: 14px;
          font-weight: normal;
          color: @color-text-primary;
          margin-bottom: 8px;
        }
        .el-date-editor.el-input {
          width: 215px;
        }
      }
      .setTimebtn {
        // position: absolute;
        // bottom: 0px;
        .buttonGroup {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .el-button {
            margin-bottom: 8px;
            width: 104px;
          }
          .el-button + .el-button {
            margin-left: 0px;
          }
        }
      }
    }
  }
}
.messageGps {
  .el-message-box__message {
    p {
      line-height: 32px;
      font-size: 16px;
      label {
        margin-right: 4px;
      }
      span {
        color: #333;
      }
    }
  }
}
</style>