lj-zhgd-htweb/src/views/construction/manage/realTimeManage/realTimeManage.vue

<template>
  <div class="realTimeManage">
    <div class="left">
      <!-- 云平台 -->
      <div class="cloud-platform-box layout">
        <div id="platform-left">
          <div class="left-right-btn-box layout">
            <button id="gq_nocheck" class="common_size"></button>
            <span class="btn-desc">光圈</span>
            <button id="gq2_nocheck" class="common_size"></button>
          </div>
        </div>
        <div id="platform-center">
          <div id="center-btn-top-box" class="layout">
            <div class="fx-btn-box layout">
              <button id="left_nocheck" class="common_size"></button>
            </div>
            <div class="fx-btn-box layout">
              <button id="top_nocheck" class="common_size"></button>
              <button id="bottom_nocheck" class="common_size"></button>
            </div>
            <div class="fx-btn-box layout">
              <button id="right_nocheck" class="common_size"></button>
            </div>
          </div>
          <div id="center-btn-bottom-box" class="layout">
            <button id="sx_nocheck" class="common_size"></button>
            <span class="btn-desc2">缩放</span>
            <button id="fd_nocheck" class="common_size"></button>
          </div>
        </div>
        <div id="platform-right">
          <div class="left-right-btn-box layout">
            <button id="jj_nocheck" class="common_size"></button>
            <span class="btn-desc">聚焦</span>
            <button id="yj_nocheck" class="common_size"></button>
          </div>
        </div>
      </div>
      <!-- 球机树 -->
      <div class="tree-box tree">
        <el-input placeholder="请输入关键字" prefix-icon="el-icon-search" v-model="filterText" maxlength="30"
          style="margin: 10px 0;"></el-input>
        <el-tree :data="treeData" icon="el-icon-search" node-key="id" :default-expanded-keys="idArr"
          @node-click="handleNodeClick" :render-content="renderContent" style="font-size: 15px;letter-spacing: 1px;"
          ref="tree" :highlight-current="true" :filter-node-method="filterNode" />
      </div>
    </div>
    <!-- 视频 -->
    <div class="center">
      <div class="change-box layout">
        <el-button type="primary" plain>1</el-button>
        <el-button type="primary" plain>4</el-button>
      </div>
      <!-- 球机视频 -->
      <div class="video-box">
        <video id="videoPlayer1" class="ball-content" autoplay="autoplay" loop="loop" muted controls="controls"></video>
      </div>
      <!-- 违章识别 -->
      <div class="vio-box"></div>
    </div>
    <!-- 预警信息 -->
    <div class="right">
      <h4>预警信息</h4>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="deviceType" label="设备类型" align="center">
        </el-table-column>
        <el-table-column prop="deviceName" label="设备名称" align="center">
        </el-table-column>
        <el-table-column prop="warnTime" label="违章时间" align="center">
        </el-table-column>
        <el-table-column prop="warnContent" label="违章内容" align="center">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getBallDeviceLists } from "@/api/construction/manage/realTimeManage.js";
export default {
  name: 'realTimeManage',
  /* 球机树前端筛选 */
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      //页码
      pageNo: 1,
      //每页条数
      pageSize: 5,
      // 球机树过滤
      filterText: '',
      //球机树数据
      treeData: [],
      // 球机树默认展示的节点
      idArr: [],
      splitScreenName: 'first',
      //保存违章照片
      violationPhoto: [{ "id": "1", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "2", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "3", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "4", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "5", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "6", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "7", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "8", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "9", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "10", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }]
      //保存表格数据
      , tableData: [
        {
          deviceType: '监控设备',
          deviceName: 'xxxxx球机',
          warnTime: '2024-03-03',
          warnContent: '人员未佩戴安全帽阿三大苏打啊飒飒大苏打飒飒打撒打撒'
        }, {
          deviceType: '监控设备',
          deviceName: 'xxxxx球机',
          warnTime: '2024-03-03',
          warnContent: '人员未佩戴安全帽'
        }, {
          deviceType: '监控设备',
          deviceName: 'xxxxx球机',
          warnTime: '2024-03-03',
          warnContent: '人员未佩戴安全帽'
        }, {
          deviceType: '监控设备',
          deviceName: 'xxxxx球机',
          warnTime: '2024-03-03',
          warnContent: '人员未佩戴安全帽'
        },
        {
          deviceType: '监控设备',
          deviceName: 'xxxxx球机',
          warnTime: '2024-03-03',
          warnContent: '人员未佩戴安全帽'
        }
      ],
    };
  },
  created() {
    this.laodBallDeviceLists();
  },
  mounted() { },
  methods: {
    /* 加载球机树 */
    laodBallDeviceLists() {
      getBallDeviceLists().then(res => {
        const treeData = res.data;
        if (treeData && treeData.length > 0) {
          this.treeData = treeData
          // 设置默认展示球机层级
          treeData.forEach(item => {
            this.idArr.push(item.id);
          })
        }
      }).catch(res => { });
    },
    /* 球机树过滤 */
    filterNode(value, data, node) {
      if (!value) {
        if (node.level == 1) {
          node.expanded = true
        } else {
          node.expanded = false
        }
        return true
      }
      // 查询列表是否有匹配数据
      let val = value.toLowerCase()
      return this.chooseNode(val, data, node)
    },
    // 过滤父节点 子节点:如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。
    chooseNode(value, data, node) {
      if (data.label.indexOf(value) !== -1) {
        return true
      }
      const level = node.level
      // 如果传入的节点本身就是一级节点就不用校验了
      if (level === 1) {
        return false
      }
      // 先取当前节点的父节点
      let parentData = node.parent
      // 遍历当前节点的父节点
      let index = 0
      while (index < level - 1) {
        // 如果匹配到直接返回
        if (parentData.data.label.indexOf(value) !== -1) {
          return true
        }
        // 否则的话再往上一层做匹配
        parentData = parentData.parent
        index++
      }
      // 没匹配到返回false
      return false
    },
    //球机树节点点击
    handleNodeClick(data, node, item) {
      if (node.level === 2) {
        // 点击球机时触发的事件
      }
    },

    //给梳妆街头不同层级设置不同的icon
    renderContent(h, { node, data }) {
      // 根据层级使用不同的图标
      let icon;
      if (node.level === 1) {
        icon = 'el-icon-coin'; // 第一层使用主页图标
      } else if (node.level === 2) {
        icon = 'el-icon-s-unfold'; // 第二层使用展开图标
      } else {
        icon = 'el-icon-user'; // 其他层级使用平台图标
      }

      return (
        <span class="custom-tree-node">
          <i class={icon}></i>
          <span>{node.label}</span>
        </span>
      );
    },
  }
};
</script>

<style lang="scss" scoped>
.realTimeManage {
  width: 100%;
  height: 80vh;
  background-color: #fff;
  box-shadow: 10px 10px 5px #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.layout {
  display: flex;
  align-items: center;
  justify-content: start;
}

.realTimeManage .left {
  width: 20%;
  height: 100%;
  padding: 0 0.5%;
  box-sizing: border-box;
}

.cloud-platform-box {
  width: 100%;
  height: 35%;
  justify-items: center;
  justify-content: space-evenly;
}

#platform-left,
#platform-right {
  width: 15%;
  height: 52%;
  margin-top: 40%;
  align-items: center;
}

.common_size {
  width: 32px;
  height: 32px;
  border: none;
  cursor: pointer;
  background-position: center center !important;
  transition: background-image 0.5s;
}

.btn-desc {
  writing-mode: vertical-lr;
  margin: 8px 0;
  letter-spacing: 2px;
}

.btn-desc2 {
  margin: 0 8px;
  letter-spacing: 2px;
}

#gq_nocheck {
  background: url("../../../../assets/images/video/gq_nocheck.png") no-repeat 0 0 /100% 100%;
}

#gq_nocheck:hover {
  background: url("../../../../assets/images/video/gq_check.png") no-repeat 0 0 /100% 100%;
}

#gq2_nocheck {
  background: url("../../../../assets/images/video/gq2_nocheck.png") no-repeat 0 0 /100% 100%;

}

#gq2_nocheck:hover {
  background: url("../../../../assets/images/video/gq2_check.png") no-repeat 0 0 /100% 100%;

}

#jj_nocheck {
  background: url("../../../../assets/images/video/jj_nocheck.png") no-repeat 0 0 /100% 100%;
}

#jj_nocheck:hover {
  background: url("../../../../assets/images/video/jj_check.png") no-repeat 0 0 /100% 100%;
}

#yj_nocheck {
  background: url("../../../../assets/images/video/yj_nocheck.png") no-repeat 0 0 /100% 100%;
}

#yj_nocheck:hover {
  background: url("../../../../assets/images/video/yj_check.png") no-repeat 0 0 /100% 100%;
}

#sx_nocheck {
  background: url("../../../../assets/images/video/sx_nocheck.png") no-repeat 0 0 /100% 100%;
}

#sx_nocheck:hover {
  background: url("../../../../assets/images/video/sx_check.png") no-repeat 0 0 /100% 100%;
}

#fd_nocheck {
  background: url("../../../../assets/images/video/fd_nocheck.png") no-repeat 0 0 /100% 100%;
}

#fd_nocheck:hover {
  background: url("../../../../assets/images/video/fd_check.png") no-repeat 0 0 /100% 100%;
}

#left_nocheck{
  background: url("../../../../assets/images/video/left_nocheck.png") no-repeat 0 0 /100% 100%;
}
#left_nocheck:hover{
  background: url("../../../../assets/images/video/left_check.png") no-repeat 0 0 /100% 100%;
}
#right_nocheck{
  background: url("../../../../assets/images/video/right_nocheck.png") no-repeat 0 0 /100% 100%;
}
#right_nocheck:hover{
  background: url("../../../../assets/images/video/right_check.png") no-repeat 0 0 /100% 100%;
}
#top_nocheck{
  background: url("../../../../assets/images/video/top_nocheck.png") no-repeat 0 0 /100% 100%;
}
#top_nocheck:hover{
  background: url("../../../../assets/images/video/top_check.png") no-repeat 0 0 /100% 100%;
}
#bottom_nocheck{
  background: url("../../../../assets/images/video/bottom_nocheck.png") no-repeat 0 0 /100% 100%;
}
#bottom_nocheck:hover{
  background: url("../../../../assets/images/video/bottom_check.png") no-repeat 0 0 /100% 100%;
}
.fx-btn-box:nth-of-type(2){
  flex-direction: column;
  justify-content: space-between;
}
.fx-btn-box:nth-of-type(2) button:nth-of-type(1){
  margin-top: 5px;
}
.fx-btn-box:nth-of-type(2) button:nth-of-type(2){
  margin-bottom: 5px;
}
.left-right-btn-box {
  width: 100%;
  height: 100%;
  background: url("../../../../assets/images/video/left_btn.png") no-repeat;
  background-position: center center !important;
  flex-direction: column;
  justify-content: center;
}

#platform-center {
  width: 67%;
  height: 100%;
}

#center-btn-top-box {
  width: 100%;
  height: 80%;
  background: url("../../../../assets/images/video/back.png") no-repeat;
  background-position: center center !important;
  justify-content: space-between;
}

.fx-btn-box {
  width: 20%;
  height: 100%;
}

#center-btn-bottom-box {
  width: 100%;
  height: 20%;
  background: url("../../../../assets/images/video/back3.png") no-repeat;
  background-position: center center !important;
  justify-content: center;
}

.tree-box {
  width: 100%;
  height: 65%;
  overflow-y: auto;
}

.realTimeManage .center {
  width: 48%;
  height: 100%;
}

.change-box {
  width: 100%;
  height: 50px;
  justify-content: center;
}

.video-box {
  width: 100%;
  height: calc(100% - 250px);
}

.ball-content {
  width: 100%;
  height: 100%;
  pointer-events: none;
  object-fit: fill;
}

.vio-box {
  width: 100%;
  height: 200px;
}

.realTimeManage .right {
  width: 30%;
  height: 100%;
}


/* tree节点过长换行处理 */
.tree {
  width: 100%;

  ::v-deep .el-tree-node {
    white-space: normal;

    .el-tree-node__content {
      height: 100%;
      align-items: center;
      margin: 4px 0;
    }
  }

  ::v-deep .el-tree-node__label {
    font-size: 15px;
  }
}

::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  color: #1890ff;
}
</style>