添加公共组件设备树

648540858

2022-04-20 f7236c4a9099d0ec3128861f8b485e28acb01146

添加公共组件设备树

 src/main/java/com/genersoft/iot/vmp/storager/IVideoManagerStorage.java

@@ -180,7 +180,7 @@
     * @param count
     * @return
     */
    PageInfo querySubChannels(String deviceId, String channelId, String query, Boolean hasSubChannel, String online, int page, int count);
    PageInfo querySubChannels(String deviceId, String channelId, String query, Boolean hasSubChannel, Boolean online, int page, int count);


    /**

 src/main/java/com/genersoft/iot/vmp/storager/dao/DeviceChannelMapper.java

@@ -246,7 +246,9 @@
            "        channelId as \"value\",\n" +
            "        channelId as \"key\",\n" +
            "        longitude,\n" +
            "        latitude\n" +
            "        latitude,\n" +
            "        PTZType,\n" +
            "        subCount\n" +
            "        from device_channel\n" +
            "        where deviceId = #{deviceId}")
    List<DeviceChannelTree> tree(String deviceId);

 src/main/java/com/genersoft/iot/vmp/storager/impl/VideoManagerStorageImpl.java

@@ -365,9 +365,9 @@
    }

    @Override
    public PageInfo<DeviceChannel> querySubChannels(String deviceId, String parentChannelId, String query, Boolean hasSubChannel, String online, int page, int count) {
    public PageInfo<DeviceChannel> querySubChannels(String deviceId, String parentChannelId, String query, Boolean hasSubChannel, Boolean online, int page, int count) {
        PageHelper.startPage(page, count);
        List<DeviceChannel> all = deviceChannelMapper.queryChannels(deviceId, parentChannelId, null, null, null);
        List<DeviceChannel> all = deviceChannelMapper.queryChannels(deviceId, parentChannelId, query, hasSubChannel, online);
        return new PageInfo<>(all);
    }


 src/main/java/com/genersoft/iot/vmp/vmanager/gb28181/device/DeviceQuery.java

@@ -235,7 +235,7 @@
            @ApiImplicitParam(name="page", value = "当前页", required = true, dataTypeClass = Integer.class),
            @ApiImplicitParam(name="count", value = "每页条数", required = true, dataTypeClass = Integer.class),
            @ApiImplicitParam(name="query", value = "查询内容", dataTypeClass = String.class),
            @ApiImplicitParam(name="online", value = "是否在线", dataTypeClass = String.class),
            @ApiImplicitParam(name="online", value = "是否在线", dataTypeClass = Boolean.class),
            @ApiImplicitParam(name="channelType", value = "通道类型， 子目录", dataTypeClass = Boolean.class),
    })
    @GetMapping("/sub_channels/{deviceId}/{channelId}/channels")
@@ -244,7 +244,7 @@
                                                  int page,
                                                  int count,
                                                  @RequestParam(required = false) String query,
                                                  @RequestParam(required = false) String online,
                                                  @RequestParam(required = false) Boolean online,
                                                  @RequestParam(required = false) Boolean channelType){

//        if (logger.isDebugEnabled()) {

 web_src/index.html

@@ -22,7 +22,7 @@
        // 地图瓦片地址
        tilesUrl: "http://webrd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
        // 瓦片大小
        tileSize: 512,
        tileSize: 256,
        // 默认层级
        zoom:10,
        // 默认地图中心点

 web_src/src/components/UiHeader.vue

@@ -10,6 +10,7 @@
            <el-menu-item index="/cloudRecord">云端录像</el-menu-item>
            <el-menu-item index="/mediaServerManger">节点管理</el-menu-item>
            <el-menu-item index="/parentPlatformList/15/1">国标级联</el-menu-item>
            <el-menu-item index="/test">设备树</el-menu-item>
            <el-menu-item @click="openDoc">在线文档</el-menu-item>
<!--            <el-submenu index="/setting">-->
<!--              <template slot="title">系统设置</template>-->

 web_src/src/components/common/DeviceTree.vue

New file
@@ -0,0 +1,159 @@
<template>
  <div id="DeviceTree" style="width: 100%;height: 100%; background-color: #FFFFFF">
    <el-container>
      <el-header>设备列表</el-header>
      <el-main style="background-color: #ffffff;">
        <div class="device-tree-main-box">
          <el-tree :props="defaultProps" :load="loadNode" lazy @node-click="handleNodeClick"@node-contextmenu="handleContextMenu">
            <span class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%">
              <span v-if="node.data.type === 0 && node.data.online" title="在线设备" class="device-online iconfont icon-jiedianleizhukongzhongxin2"></span>
              <span v-if="node.data.type === 0 && !node.data.online " title="离线设备" class="device-offline iconfont icon-jiedianleizhukongzhongxin2"></span>
              <span v-if="node.data.type === 2 && node.data.online" title="目录"  class="device-online iconfont icon-jiedianleilianjipingtai"></span>
              <span v-if="node.data.type === 2 && !node.data.online" title="目录"  class="device-offline iconfont icon-jiedianleilianjipingtai"></span>
              <span v-if="node.data.type === 3 && node.data.online " title="在线通道" class="device-online iconfont icon-shebeileijiankongdian"></span>
              <span v-if="node.data.type === 3 && !node.data.online" title="在线通道" class="device-offline iconfont icon-shebeileijiankongdian"></span>
              <span v-if="node.data.type === 4 && node.data.online " title="在线通道-球机" class="device-online iconfont icon-shebeileiqiuji"></span>
              <span v-if="node.data.type === 4 && !node.data.online" title="在线通道-球机" class="device-offline iconfont icon-shebeileiqiuji"></span>
              <span v-if="node.data.type === 5 && node.data.online " title="在线通道-半球" class="device-online iconfont icon-shebeileibanqiu"></span>
              <span v-if="node.data.type === 5 && !node.data.online" title="在线通道-半球" class="device-offline iconfont icon-shebeileibanqiu"></span>
              <span v-if="node.data.type === 6 && node.data.online " title="在线通道-枪机" class="device-online iconfont icon-shebeileiqiangjitongdao"></span>
              <span v-if="node.data.type === 6 && !node.data.online" title="在线通道-枪机" class="device-offline iconfont icon-shebeileiqiangjitongdao"></span>
              <span v-if="node.data.online" style="padding-left: 1px" class="device-online">{{ node.label }}</span>
              <span v-if="!node.data.online" style="padding-left: 1px" class="device-offline">{{ node.label }}</span>
              <span>
                <i v-if="node.data.hasGPS && node.data.online" style="color: #9d9d9d" class="device-online iconfont icon-dizhi"></i>
                <i v-if="node.data.hasGPS && !node.data.online" style="color: #9d9d9d" class="device-offline iconfont icon-dizhi"></i>
              </span>
            </span>
          </el-tree>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import DeviceService from "../service/DeviceService.js";

export default {
    name: 'DeviceTree',
    data() {
        return {
          deviceService: new DeviceService(),
          defaultProps: {
            children: 'children',
            label: 'name',
            isLeaf: 'isLeaf'
          }
        };
    },
    props: ['clickEvent', 'contextMenuEvent'],
    methods: {
      handleNodeClick(data) {
        console.log("点击事件")
        if(typeof (this.clickEvent) == "function") {
          this.clickEvent(data.userData)
        }
      },
      handleContextMenu(data) {
        console.log("右键点击事件")
        if(typeof (this.contextMenuEvent) == "function") {
          this.contextMenuEvent(data.userData)
        }
      },
      loadNode: function(node, resolve){
        if (node.level === 0) {
          this.deviceService.getAllDeviceList((data)=>{
            console.log(data)
            if (data.length > 0) {
              let nodeList = []
              for (let i = 0; i < data.length; i++) {
                console.log(data[i].name)
                let node = {
                  name: data[i].name || data[i].deviceId,
                  isLeaf: false,
                  id: data[i].deviceId,
                  type: data[i].online,
                  online: data[i].online === 1,
                  userData: data[i]
                }
                nodeList.push(node);
              }
              resolve(nodeList)
            }else {
              resolve([])
            }
          }, (error)=>{

          })
        }
        if (node.level === 1) {
          this.deviceService.getAllChannel(true, node.data.id, (catalogData) => {
            this.deviceService.getAllChannel(false, node.data.id, (channelData) => {
              let data = catalogData.concat(channelData)
              this.channelDataHandler(data, resolve)
            })
          })
        }else if (node.level > 1){
          this.deviceService.getAllSubChannel(true, node.data.deviceId, node.data.id, (catalogData)=>{
            this.deviceService.getAllSubChannel(false, node.data.deviceId, node.data.id, (channelData)=>{
              let data = catalogData.concat(channelData)
              this.channelDataHandler(data, resolve)
            })
          })
        }
      },
      channelDataHandler: function (data, resolve) {
        if (data.length > 0) {
          let nodeList = []
          for (let i = 0; i < data.length; i++) {
            let type = 3;
            if (data[i].subCount > 0) {
              type = 2;
            }else if (data[i].ptztype === 1 ) { // 1-球机;2-半球;3-固定枪机;4-遥控枪机
              type = 4;
            }else if (data[i].ptztype === 2) {
              type = 5;
            }else if (data[i].ptztype === 3 || data[i].ptztype === 4) {
              type = 6;
            }
            let node = {
              name: data[i].name || data[i].channelId,
              isLeaf: data[i].subCount === 0,
              id: data[i].channelId,
              deviceId: data[i].deviceId,
              type: type,
              online: data[i].status === 1,
              hasGPS: data[i].longitude*data[i].latitude !== 0,
              userData: data[i]
            }
            nodeList.push(node);
          }
          resolve(nodeList)
        }else {
          resolve([])
        }
      }
    },
    destroyed() {
      // if (this.jessibuca) {
      //   this.jessibuca.destroy();
      // }
      // this.playing = false;
      // this.loaded = false;
      // this.performance = "";
    },
}
</script>

<style>
.device-tree-main-box{
  text-align: left;
}
.device-online{
  color: #252525;
}
.device-offline{
  color: #727272;
}
</style>

 web_src/src/components/service/DeviceService.js

@@ -46,21 +46,21 @@
  }


  getAllCatalog(deviceId, callback, errorCallback) {
  getAllChannel(isCatalog, deviceId, callback, errorCallback) {
    let currentPage = 1;
    let count = 100;
    let catalogList = []
    this.getAllCatalogIteration(deviceId, catalogList, currentPage, count, callback, errorCallback)
    this.getAllChannelIteration(isCatalog, deviceId, catalogList, currentPage, count, callback, errorCallback)
  }

  getAllCatalogIteration(deviceId, catalogList, currentPage, count, callback, errorCallback) {
    this.getCatalog(deviceId, currentPage, count, (data) => {
  getAllChannelIteration(isCatalog, deviceId, catalogList, currentPage, count, callback, errorCallback) {
    this.getChanel(isCatalog, deviceId, currentPage, count, (data) => {
      console.log(data)
      if (data.list) {
        catalogList = catalogList.concat(data.list);
        if (catalogList.length < data.total) {
          currentPage ++
          this.getAllCatalogIteration(deviceId, catalogList, currentPage, count, callback, errorCallback)
          this.getAllChannelIteration(isCatalog, deviceId, catalogList, currentPage, count, callback, errorCallback)
        }else {
          console.log(2222)
          if (typeof (callback) == "function") callback(catalogList)
@@ -68,7 +68,7 @@
      }
    }, errorCallback)
  }
  getCatalog(deviceId, currentPage, count, callback, errorCallback) {
  getChanel(isCatalog, deviceId, currentPage, count, callback, errorCallback) {
    this.$axios({
      method: 'get',
      url: `/api/device/query/devices/${deviceId}/channels`,
@@ -77,7 +77,7 @@
        count: count,
        query: "",
        online: "",
        channelType: true
        channelType: isCatalog
      }
    }).then((res) =>{
      if (typeof (callback) == "function") callback(res.data)
@@ -85,29 +85,28 @@
  }


  getAllSubCatalog(deviceId, channelId, callback, errorCallback) {
  getAllSubChannel(isCatalog, deviceId, channelId, callback, errorCallback) {
    let currentPage = 1;
    let count = 100;
    let catalogList = []
    this.getAllSubCatalogIteration(deviceId, channelId, catalogList, currentPage, count, callback, errorCallback)
    this.getAllSubChannelIteration(isCatalog, deviceId, channelId, catalogList, currentPage, count, callback, errorCallback)
  }

  getAllSubCatalogIteration(deviceId,channelId, catalogList, currentPage, count, callback, errorCallback) {
    this.getSubCatalog(deviceId, channelId, currentPage, count, (data) => {
  getAllSubChannelIteration(isCatalog, deviceId,channelId, catalogList, currentPage, count, callback, errorCallback) {
    this.getSubChannel(isCatalog, deviceId, channelId, currentPage, count, (data) => {
      console.log(data)
      if (data.list) {
        catalogList = catalogList.concat(data.list);
        if (catalogList.length < data.total) {
          currentPage ++
          this.getAllSubCatalogIteration(deviceId, channelId, catalogList, currentPage, count, callback, errorCallback)
          this.getAllSubChannelIteration(isCatalog, deviceId, channelId, catalogList, currentPage, count, callback, errorCallback)
        }else {
          console.log(2222)
          if (typeof (callback) == "function") callback(catalogList)
        }
      }
    }, errorCallback)
  }
  getSubCatalog(deviceId, channelId, currentPage, count, callback, errorCallback) {
  getSubChannel(isCatalog, deviceId, channelId, currentPage, count, callback, errorCallback) {
    this.$axios({
      method: 'get',
      url: `/api/device/query/sub_channels/${deviceId}/${channelId}/channels`,
@@ -116,12 +115,22 @@
        count: count,
        query: "",
        online: "",
        channelType: true
        channelType: isCatalog
      }
    }).then((res) =>{
      if (typeof (callback) == "function") callback(res.data)
    }).catch(errorCallback);
  }
  getDeviceTree(deviceId, callback, errorCallback){
    this.$axios({
      method: 'get',
      url: `/api/device/query/${deviceId}/tree`,
      params:{}
    }).then((res) =>{
      console.log(res.data)
      if (typeof (callback) == "function") callback(res.data.data)
    }).catch(errorCallback);
  }
}

export default DeviceService;

 web_src/src/router/index.js

@@ -15,6 +15,7 @@
import sip from '../components/setting/Sip.vue'
import media from '../components/setting/Media.vue'
import live from '../components/live.vue'
import deviceTree from '../components/common/DeviceTree.vue'

import wasmPlayer from '../components/common/jessibuca.vue'
import rtcPlayer from '../components/dialog/rtcPlayer.vue'
@@ -115,5 +116,10 @@
      name: 'rtcPlayer',
      component: rtcPlayer,
    },
    {
      path: '/test',
      name: 'deviceTree',
      component: deviceTree,
    },
  ]
})

 web_src/static/css/iconfont.css

@@ -1,8 +1,6 @@
@font-face {
  font-family: "iconfont"; /* Project id 1291092 */
  src: url('iconfont.woff2?t=1647245982270') format('woff2'),
       url('iconfont.woff?t=1647245982270') format('woff'),
       url('iconfont.ttf?t=1647245982270') format('truetype');
  src: url('iconfont.woff2?t=1650436696596') format('woff2');
}

.iconfont {
@@ -13,6 +11,50 @@
  -moz-osx-font-smoothing: grayscale;
}

.icon-jiedianleizhukongzhongxin1:before {
  content: "\e9d0";
}

.icon-jiedianleizhukongzhongxin2:before {
  content: "\e9d1";
}

.icon-jiedianleilianjipingtai:before {
  content: "\e9d3";
}

.icon-jiedianleiquyu:before {
  content: "\e9d4";
}

.icon-shebeileigis:before {
  content: "\e9ec";
}

.icon-shebeileibanqiu:before {
  content: "\e9f5";
}

.icon-shebeileibanqiugis:before {
  content: "\e9f6";
}

.icon-shebeileijiankongdian:before {
  content: "\ea07";
}

.icon-shebeileiqiangjitongdao:before {
  content: "\ea15";
}

.icon-shebeileiqiuji:before {
  content: "\ea17";
}

.icon-shebeileiqiujigis:before {
  content: "\ea18";
}

.icon-xitongxinxi:before {
  content: "\e7d6";
}

 web_src/static/css/iconfont.woff2

Binary files differ