国标级联--选择通道003-前端页面

panlinlin

2021-01-10 658bec3ecc0453fce36b083bf6cbe03ee495d611

国标级联--选择通道003-前端页面

 src/main/java/com/genersoft/iot/vmp/VManageBootstrap.java

@@ -8,7 +8,7 @@


@SpringBootApplication

public class VManageBootstrap extends LogManager {

    public static void main(String[] args) {

    public static void main(String[] args) { 
        SpringApplication.run(VManageBootstrap.class, args);

    }

}


 src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/impl/SIPCommander.java

@@ -77,6 +77,9 @@
    @Value("${media.seniorSdp}")

    private boolean seniorSdp;



    @Value("${media.autoApplyPlay}")

    private boolean autoApplyPlay;



    @Autowired

    private ZLMHttpHookSubscribe subscribe;



@@ -287,8 +290,12 @@
    @Override

    public void playStreamCmd(Device device, String channelId, ZLMHttpHookSubscribe.Event event, SipSubscribe.Event errorEvent) {

        try {



            String ssrc = streamSession.createPlaySsrc();

            String ssrc = "";

            if (rtpEnable) {

                ssrc = String.format("gb_play_%s_%s", device.getDeviceId(), channelId);

            }else {

                ssrc = streamSession.createPlaySsrc();

            }

            String streamId = null;

            if (rtpEnable) {

                streamId = String.format("gb_play_%s_%s", device.getDeviceId(), channelId);

@@ -408,7 +415,12 @@
            , SipSubscribe.Event errorEvent) {

        try {

            MediaServerConfig mediaInfo = redisCatchStorage.getMediaInfo();

            String ssrc = streamSession.createPlayBackSsrc();

            String ssrc = null;

            if (rtpEnable) {

                ssrc = String.format("gb_playback_%s_%s", device.getDeviceId(), channelId);

            }else {

                ssrc = streamSession.createPlayBackSsrc();

            }

            String streamId = String.format("%08x", Integer.parseInt(ssrc)).toUpperCase();

            // 添加订阅

            JSONObject subscribeKey = new JSONObject();


 src/main/java/com/genersoft/iot/vmp/media/zlm/ZLMHttpHookListener.java

@@ -82,13 +82,10 @@
    @ResponseBody

    @PostMapping(value = "/on_flow_report", produces = "application/json;charset=UTF-8")

    public ResponseEntity<String> onFlowReport(@RequestBody JSONObject json){

		
        if (logger.isDebugEnabled()) {

            logger.debug("ZLM HOOK on_flow_report API调用，参数：" + json.toString());

        }



        logger.debug("ZLM HOOK on_flow_report API调用，参数：" + json.toString());

        // TODO Auto-generated method stub



		
        JSONObject ret = new JSONObject();

        ret.put("code", 0);

        ret.put("msg", "success");

@@ -234,8 +231,13 @@
        if (logger.isDebugEnabled()) {

            logger.debug("ZLM HOOK on_shell_login API调用，参数：" + json.toString());

        }

        // TODO Auto-generated method stub

		
        // TODO 如果是带有rtpstream则开启按需拉流

        String app = json.getString("app");

        String stream = json.getString("stream");



        ZLMHttpHookSubscribe.Event subscribe = this.subscribe.getSubscribe(ZLMHttpHookSubscribe.HookType.on_publish, json);

        if (subscribe != null) subscribe.response(json);



        JSONObject ret = new JSONObject();

        ret.put("code", 0);

        ret.put("msg", "success");


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

@@ -7,7 +7,11 @@
import com.genersoft.iot.vmp.gb28181.bean.Device;

import com.genersoft.iot.vmp.gb28181.bean.DeviceChannel;

import com.genersoft.iot.vmp.gb28181.bean.ParentPlatform;

import com.genersoft.iot.vmp.vmanager.platform.bean.ChannelReduce;

import com.github.pagehelper.PageInfo;

import gov.nist.javax.sip.stack.NioTcpMessageProcessor;



import javax.swing.event.ChangeEvent;



/**    

 * @Description:视频设备数据存储接口

@@ -200,4 +204,18 @@
     * 所有平台离线

     */

    void outlineForAllParentPlatform();



    /**

     * 查询通道信息， 不区分设备

     */

    PageInfo<ChannelReduce> queryChannelListInAll(int page, int count, String query, Boolean online, Boolean channelType, String parentChannelId);





    /**

     * 更新上级平台的通道信息

     * @param platformId

     * @param channelReduces

     * @return

     */

    int updateChannelForGB(String platformId, List<ChannelReduce> channelReduces);

}


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

@@ -1,6 +1,8 @@
package com.genersoft.iot.vmp.storager.dao;

import com.genersoft.iot.vmp.gb28181.bean.DeviceChannel;
import com.genersoft.iot.vmp.gb28181.bean.ParentPlatform;
import com.genersoft.iot.vmp.vmanager.platform.bean.ChannelReduce;
import org.apache.ibatis.annotations.*;

import java.util.List;
@@ -82,4 +84,22 @@

    @Update(value = {"UPDATE device_channel SET streamId=#{streamId} WHERE deviceId=#{deviceId} AND channelId=#{channelId}"})
    void startPlay(String deviceId, String channelId, String streamId);


    @Select(value = {" <script>" +
            "SELECT * FROM ( "+
            " SELECT dc.channelId, dc.deviceId, dc.name, de.manufacturer, de.hostAddress, " +
            "(SELECT count(0) FROM device_channel WHERE parentId=dc.channelId) as subCount " +
            "FROM device_channel dc LEFT JOIN device de ON dc.deviceId = de.deviceId" +
            " WHERE 1=1 " +
            " <if test=\"query != null\"> AND (dc.channelId LIKE '%${query}%' OR dc.name LIKE '%${query}%' OR dc.name LIKE '%${query}%')</if> " +
            " <if test=\"parentChannelId != null\"> AND dc.parentId=#{parentChannelId} </if> " +
            " <if test=\"online == true\" > AND dc.status=1</if>" +
            " <if test=\"online == false\" > AND dc.status=0</if>) dcr" +
            " WHERE 1=1 " +
            " <if test=\"hasSubChannel == true\" >  AND subCount >0</if>" +
            " <if test=\"hasSubChannel == false\" >  AND subCount=0</if>" +
            " </script>"})

    List<ChannelReduce> queryChannelListInAll(String query, Boolean online, Boolean hasSubChannel, String parentChannelId);
}

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

New file
@@ -0,0 +1,7 @@
package com.genersoft.iot.vmp.storager.dao;

import org.mapstruct.Mapper;

@Mapper
public interface patformChannelMapper {
}

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

@@ -9,6 +9,7 @@
import com.genersoft.iot.vmp.storager.dao.DeviceChannelMapper;
import com.genersoft.iot.vmp.storager.dao.DeviceMapper;
import com.genersoft.iot.vmp.storager.dao.ParentPlatformMapper;
import com.genersoft.iot.vmp.vmanager.platform.bean.ChannelReduce;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
@@ -16,6 +17,7 @@

import com.genersoft.iot.vmp.gb28181.bean.Device;
import com.genersoft.iot.vmp.storager.IVideoManagerStorager;
import org.springframework.transaction.annotation.Transactional;

/**    
 * @Description:视频设备数据存储-jdbc实现
@@ -270,4 +272,20 @@
    public void outlineForAllParentPlatform() {
        platformMapper.outlineForAllParentPlatform();
    }


    @Override
    public PageInfo<ChannelReduce> queryChannelListInAll(int page, int count, String query, Boolean online,
                                                         Boolean channelType, String parentChannelId) {
        PageHelper.startPage(page, count);
        List<ChannelReduce> all = deviceChannelMapper.queryChannelListInAll(query, online, channelType, parentChannelId);
        return new PageInfo<>(all);
    }


    @Transactional
    @Override
    public int updateChannelForGB(String platformId, List<ChannelReduce> channelReduces) {
        return 0;
    }
}

 src/main/java/com/genersoft/iot/vmp/vmanager/device/DeviceController.java

@@ -63,13 +63,6 @@

    /**
     * 分页查询通道数
     * @param deviceId 设备id
     * @param page 当前页
     * @param count 每页条数
     * @return 通道列表
     */
    /**
     * 分页查询通道数
     *
     * @param deviceId 设备id
     * @param page 当前页

 src/main/java/com/genersoft/iot/vmp/vmanager/platform/PlatformController.java

@@ -1,10 +1,13 @@
package com.genersoft.iot.vmp.vmanager.platform;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.genersoft.iot.vmp.gb28181.bean.ParentPlatform;
import com.genersoft.iot.vmp.gb28181.transmit.cmd.ISIPCommanderForPlatform;
import com.genersoft.iot.vmp.storager.IRedisCatchStorage;
import com.genersoft.iot.vmp.storager.IVideoManagerStorager;
import com.genersoft.iot.vmp.vmanager.platform.bean.ChannelReduce;
import com.genersoft.iot.vmp.vmanager.platform.bean.UpdateChannelParam;
import com.github.pagehelper.PageInfo;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
@@ -14,6 +17,9 @@
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;
import com.genersoft.iot.vmp.conf.SipConfig;

import java.util.List;
import java.util.Map;


@CrossOrigin
@@ -142,5 +148,34 @@
        return new ResponseEntity<>(String.valueOf(parentPlatform != null), HttpStatus.OK);
    }

    @RequestMapping("/platforms/channelList")
    @ResponseBody
    public PageInfo<ChannelReduce> channelList(int page, int count,
                                              @RequestParam(required = false) String query,
                                              @RequestParam(required = false) Boolean online,
                                              @RequestParam(required = false) Boolean channelType){

        if (logger.isDebugEnabled()) {
            logger.debug("查询所有所有通道API调用");
        }

        PageInfo<ChannelReduce> channelReduces = storager.queryChannelListInAll(page, count, query, online, channelType, null);

        return channelReduces;
    }


    @RequestMapping("/platforms/updateChannelForGB")
    @ResponseBody
    public ResponseEntity<String> updateChannelForGB(@RequestBody UpdateChannelParam param){

        if (logger.isDebugEnabled()) {
            logger.debug("给上级平台添加国标通道API调用");
        }
        int result = storager.updateChannelForGB(param.getPlatformId(), param.getChannelReduces());

        return new ResponseEntity<>(String.valueOf(result > 0), HttpStatus.OK);
    }


}

 src/main/java/com/genersoft/iot/vmp/vmanager/platform/bean/ChannelReduce.java

New file
@@ -0,0 +1,78 @@
package com.genersoft.iot.vmp.vmanager.platform.bean;

/**
 * 精简的channel信息展示，主要是选择通道的时候展示列表使用
 */
public class ChannelReduce {

    /**
     * 通道id
     */
    private String channelId;

    /**
     * 设备id
     */
    private String deviceId;

    /**
     * 通道名
     */
    private String name;

    /**
     * 生产厂商
     */
    private String manufacturer;

    /**
     * wan地址
     */
    private String  hostAddress;

    /**
     * 子节点数
     */
    private int  subCount;


    public String getChannelId() {
        return channelId;
    }

    public void setChannelId(String channelId) {
        this.channelId = channelId;
    }

    public String getDeviceId() {
        return deviceId;
    }

    public void setDeviceId(String deviceId) {
        this.deviceId = deviceId;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getManufacturer() {
        return manufacturer;
    }

    public void setManufacturer(String manufacturer) {
        this.manufacturer = manufacturer;
    }

    public String getHostAddress() {
        return hostAddress;
    }

    public void setHostAddress(String hostAddress) {
        this.hostAddress = hostAddress;
    }
}

 src/main/java/com/genersoft/iot/vmp/vmanager/platform/bean/UpdateChannelParam.java

New file
@@ -0,0 +1,24 @@
package com.genersoft.iot.vmp.vmanager.platform.bean;

import java.util.List;

public class UpdateChannelParam {
    private String platformId;
    private List<ChannelReduce> channelReduces;

    public String getPlatformId() {
        return platformId;
    }

    public void setPlatformId(String platformId) {
        this.platformId = platformId;
    }

    public List<ChannelReduce> getChannelReduces() {
        return channelReduces;
    }

    public void setChannelReduces(List<ChannelReduce> channelReduces) {
        this.channelReduces = channelReduces;
    }
}

 src/main/resources/wvp.sqlite

Binary files differ

 web_src/src/components/ParentPlatformList.vue

@@ -95,7 +95,6 @@
    }
  },
  mounted() {
     this.$refs.chooseChannelDialog.openDialog()
    this.initData();
    this.updateLooper = setInterval(this.initData, 10000);
  },
@@ -138,7 +137,9 @@
            });
    },
    chooseChannel: function(platform) {
       this.$refs.chooseChannelDialog.openDialog()
       this.$refs.chooseChannelDialog.openDialog(platform.deviceGBId, ()=>{
         this.initData()
       })
    },
    initData: function() {
      this.getPlatformList();

 web_src/src/components/gb28181/chooseChannel.vue

@@ -1,63 +1,36 @@
<template>
<div id="chooseChannel" v-loading="isLoging">

    <el-dialog title="选择通道" top="0" :close-on-click-modal="false" :visible.sync="showDialog" :destroy-on-close="true" @close="close()">
        <el-container>
            <el-main style="background-color: #FFF;">
            <el-tabs v-model="tabActiveName" >
    <el-dialog title="选择通道" top="2rem" width="70%" :close-on-click-modal="false" :visible.sync="showDialog" :destroy-on-close="true" @close="close()">
        <el-tabs v-model="tabActiveName" >
            <el-tab-pane label="国标通道" name="gbChannel">

                    <el-tab-pane label="国标通道" name="gbChannel">
                        <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
                            搜索: <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字" prefix-icon="el-icon-search" v-model="searchSrt" clearable> </el-input>

                            通道类型: <el-select size="mini" @change="search" style="margin-right: 1rem;" v-model="channelType" placeholder="请选择" default-first-option>
                                <el-option label="全部" value=""></el-option>
                                <el-option label="设备" value="false"></el-option>
                                <el-option label="子目录" value="true"></el-option>
                            </el-select>
                            在线状态: <el-select size="mini" style="margin-right: 1rem;" @change="search" v-model="online" placeholder="请选择" default-first-option>
                                <el-option label="全部" value=""></el-option>
                                <el-option label="在线" value="true"></el-option>
                                <el-option label="离线" value="false"></el-option>
                            </el-select>
                        </div>
                        <el-table :data="gbChannels" border style="width: 100%" @selection-change="handleGBSelectionChange"  >
                            <el-table-column type="selection" width="55" align="center" fixed> </el-table-column>
                            <el-table-column prop="devicelId" label="设备编号" width="210" >
                            </el-table-column>
                            <el-table-column prop="channelId" label="通道编号" width="210">
                            </el-table-column>
                            <el-table-column prop="channelName" label="通道名称">
                            </el-table-column>
                            <el-table-column label="地址" width="180" align="center">
                                <template slot-scope="scope">
                                    <div slot="reference" class="name-wrapper">
                                        <el-tag size="medium">{{ scope.row.hostAddress }}</el-tag>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="manufacturer" label="厂家" align="center">
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="直播流通道" name="streamchannel">
                        <!-- TODO -->
                    </el-tab-pane>
                </el-tabs>

            </el-main>
    </el-container>
                <el-container>
                    <el-main style="background-color: #FFF;">
                     <chooseChannelForGb :chooseChanage=chooseChanage ></chooseChannelForGb>
                    </el-main>
                    <el-footer>
                         <el-button size="mini" type="primary" style="float: right" @click="save()">保存</el-button>
                    </el-footer>
            </el-container>
               
               
            </el-tab-pane>
            <el-tab-pane label="直播流通道" name="streamchannel">
                <!-- TODO -->
            </el-tab-pane>
        </el-tabs>
    </el-dialog>
</div>
</template>

<script>
// import player from './player.vue'
import chooseChannelForGb from './chooseChannelForGb.vue'
export default {
    name: 'chooseChannel',
    props: {},
    components: {
        // player,
        chooseChannelForGb,
    },
    computed: {
        // getPlayerShared: function () {
@@ -73,37 +46,20 @@
        return {
            isLoging: false,
            tabActiveName: "gbChannel",
            platformId: "",
            isLoging: false,
            showDialog: false,
            chooseChanageCallback: null,
            closeCallback: null,
            gbChannels: [
                {
                    devicelId: "34000000000200001",
                    channelId: "34000000000200001",
                    channelName: "test",
                    hostAddress: "192.168.1.1:5060",
                    manufacturer: "大华"
                },{
                    devicelId: "34000000000200001",
                    channelId: "34000000000200001",
                    channelName: "test",
                    hostAddress: "192.168.1.1:5060",
                    manufacturer: "大华"
                }
            ],
            searchSrt: "",
            channelType: "",
            online: "",
            chooseData: []
            
        };
    },
    methods: {
        
        openDialog: function (chooseChanageCallback, closeCallback) {
        openDialog: function (platformId,  closeCallback) {
            console.log(platformId)
            this.platformId = platformId
            this.showDialog = true
            this.closeCallback = closeCallback
            this.chooseChanageCallback = chooseChanageCallback
        },
        close: function() {

@@ -111,8 +67,31 @@
        search: function() {

        },
        handleGBSelectionChange: function() {
        save: function() {
            var that = this;

            this.$axios({
                method:"post",
                url:"/api/platforms/updateChannelForGB",
                data:{
                    platformId:  that.platformId,
                    channelReduces:  that.chooseData
                }
            }).then((res)=>{
                if (res.data == true) {
                    that.$message({
                        showClose: true,
                        message: '保存成功,',
                        type: 'success'
                    });
                }
            }).catch(function (error) {
                console.log(error);
            });
        },
        chooseChanage: function(val) {
            console.log(val)
            this.chooseData = val;
        }
    }
};

 web_src/src/components/gb28181/chooseChannelForGb.vue

New file
@@ -0,0 +1,120 @@
<template>
<div id="chooseChannelForGb" >
   <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
        搜索: <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字" prefix-icon="el-icon-search" v-model="searchSrt" clearable> </el-input>

        通道类型: <el-select size="mini" @change="search" style="margin-right: 1rem;" v-model="channelType" placeholder="请选择" default-first-option>
            <el-option label="全部" value=""></el-option>
            <el-option label="设备" value="false"></el-option>
            <el-option label="子目录" value="true"></el-option>
        </el-select>
        在线状态: <el-select size="mini" style="margin-right: 1rem;" @change="search" v-model="online" placeholder="请选择" default-first-option>
            <el-option label="全部" value=""></el-option>
            <el-option label="在线" value="true"></el-option>
            <el-option label="离线" value="false"></el-option>
        </el-select>
    </div>
    <el-table ref="gbChannelsTable" :data="gbChannels" border style="width: 100%" @selection-change="chooseChanage"  >
        <el-table-column type="selection" width="55" align="center" fixed> </el-table-column>
        <el-table-column prop="channelId" label="通道编号" width="210">
        </el-table-column>
        <el-table-column prop="name" label="通道名称">
        </el-table-column>
        <el-table-column prop="deviceId" label="设备编号" width="210" >
        </el-table-column>
        <el-table-column label="设备地址" width="180" align="center">
            <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.hostAddress }}</el-tag>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="manufacturer" label="厂家" align="center">
        </el-table-column>
    </el-table>
    <el-pagination style="float: right;margin-top: 1rem;" @size-change="handleSizeChange" @current-change="currentChange" :current-page="currentPage" :page-size="count" :page-sizes="[15, 20, 30, 50]" layout="total, sizes, prev, pager, next" :total="total">
    </el-pagination>
</div>
</template>

<script>
export default {
    name: 'chooseChannelForGb',
    props: {},
    computed: {
        // getPlayerShared: function () {
        //     return {
        //         sharedUrl: window.location.host + '/' + this.videoUrl,
        //         sharedIframe: '<iframe src="' + window.location.host + '/' + this.videoUrl + '"></iframe>',
        //         sharedRtmp: this.videoUrl
        //     };
        // }
    },
    props: ['chooseChanage'],
    created() {
        this.initData();
    },
    data() {
        return {
            gbChannels: [],
            searchSrt: "",
            channelType: "",
            online: "",
            currentPage: parseInt(this.$route.params.page),
            count: parseInt(this.$route.params.count),
            total: 0
            
        };
    },
    methods: {
        initData: function() {
            this.getChannelList();
        },
        currentChange: function (val) {
            this.currentPage = val;
            this.initData();
        },
        handleSizeChange: function (val) {
             this.count = val;
            this.initData();

        },
        getChannelList: function () {
            let that = this;

            this.$axios.get(`/api/platforms/channelList`, {
                    params: {
                        page: that.currentPage - 1,
                        count: that.count,
                        query: that.searchSrt,
                        online: that.online,
                        channelType: that.channelType
                    }
                })
                .then(function (res) {
                    console.log(res);
                    that.total = res.data.total;
                    that.gbChannels = res.data.list;
                    // 防止出现表格错位
                    that.$nextTick(() => {
                        that.$refs.gbChannelsTable.doLayout();
                    })
                })
                .catch(function (error) {
                    console.log(error);
                });

        },
        search: function() {
            this.initData();
        },
        handleGBSelectionChange: function() {
            this.initData();
        },
    }
};
</script>

<style>

</style>