<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-treeview.css">
    <link rel="stylesheet" href="../css/jgsbgl.css">
    <link rel="stylesheet" href="../element/element-ui.css">
    <title>机构设备管理</title>
</head>
<body>
<div id="page-sy">

    <div class="right-nav" style="width: 98%">
        <div class="center-nav" id="jgsb">
            <div class="div-right-top">
                <span class="pub-span">监控名称：</span>
                <input type="text" class="form-control input-pub" id="ryxm">
                <button type="button" class="btn btn-sm pub-btn" @click="queryRY(1,true)">查询</button>
                <button type="button" class="btn btn-sm pub-btn" @click="add">新增</button>
            </div>
            <div style="height:calc(100% - 130px);margin-top: 20px;text-align: center" class="tables">
                <table class="table table-td">
                    <thead>
                    <tr style="background-color: rgb(228, 228, 228);">
                        <td width="13%">通道名称</td>
                        <td width="10%">监控ID</td>
                        <td>RTSP/HLS</td>
                        <td width="8%">操作</td>
                        <td width="8%">添加任务</td>
                    </tr>
                    </thead>
                    <tbody class="div-pub-gt">
                    <tr v-for="(item,index) in data_table_monitor">
                        <td v-text="item.tdmc" width="13%"></td>
                        <td v-text="item.sbbh"width="10%" ></td>
                        <td v-text="item.squrllj " ></td>
                        <td width="8%">
                            <img   @click="del(item)" src="../img/del.png" width="24px" >
                                <img  width="24px"  @click="edit(item)" src="../img/edit.png"  >
                            <!--<button type="button" class="btn btn-sm" style="background-color: #368ff3;color: white;padding: 2px 6px;" @click="edit(item)">编辑</button>-->
                            <!--<button type="button" class="btn btn-sm btn-danger" style="padding: 2px 6px;" @click="del(item)">删除</button>-->
                            <!--<button type="button" class="btn btn-sm btn-danger" style="padding: 2px 6px;" @click="del(item)">删除</button>-->
                        </td>
                        <td
                            width="8%">
                            <img @click="addtask(item)" src="../img/add.png" width="24px" >
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div>
                <div style="line-height: 64px;float: left;font-weight: 900;">
                    <span>共</span><span style="color: red;" v-text="count"></span><span>条</span>
                </div>
                <ul id="fy4" style="float: right;"></ul>
                <div style="float: right;margin-top: 21px;margin-right: 30px;width: 110px;line-height: 36px;font-weight: 900;">
                    <span style="float: left;width: 34px;">每页</span>
                    <select class="form-control" v-model="fy_select" style="width: 50px;padding: 0px 3px;float: left;" v-on:change="getChange()">
                        <option>10</option>
                        <option>20</option>
                        <option>30</option>
                        <option>40</option>
                        <option>50</option>
                    </select>
                    <span style="float: left;margin-left: 8px;">条</span>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="myjgModal1_edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <form onsubmit="return false;" class="form-horizontal" role="form">
        <div class="modal-dialog" role="document" style="width: 460px;">
            <div class="modal-content" style="color: #e6eaef;width: 460px;">
                <div class="modal-header" style="background-color: rgb(48, 53, 72);">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true" style="color: white;">&times;</span></button>
                    <h6 class="modal-title">编辑监控</h6>
                </div>
                <div class="modal-body" style="height:330px;">
                    <table class="table table-td">
                        <tbody>
                        <tr>
                            <td>监控名称:</td>
                            <td><input type="text" name="name" style="width:280px;" class="form-control" v-model="data_s.tdmc"
                                       autocomplete="off" required></td>
                        </tr>
                        <tr>
                            <td>设备编号:</td>
                            <td><input type="text" name="address" style="width:280px;" class="form-control" v-model="data_s.sbbh"
                                       autocomplete="off" required></td>
                        </tr>

                        <tr>
                            <td>设备类型:</td>
                            <td>
                                <select>
                                    <option value ="1">RTSP</option>
                                    <option value ="2">HLS</option>
                                </select>

                            </td>
                        </tr>
                        <tr>
                            <td>RTSP/HLS:</td>
                            <td><input type="text" name="address" style="width:280px;" class="form-control" v-model="data_s.squrllj "
                                       autocomplete="off" required></td>
                        </tr>
                        <tr>
                            <td>所属辖区:</td>
                            <td><input class="easyui-combotree form-control" id="department2" name="city1" v-model="data_s.qymc"
                                       style="width:280px;"/>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm" data-dismiss="modal" style="color: #2f2f2f;">关闭</button>
                    <button type="button submit" class="btn btn-sm btn-info" style="background-color: #368ff3" @click="define">确定
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="modal fade" id="myjgModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <form onsubmit="return false;" class="form-horizontal" role="form" onkeydown="if(event.keyCode==13){return false;}">
        <div class="modal-dialog" role="document" style="width: 510px;">
            <div class="modal-content" style="color: #e6eaef;width: 510px;">
                <div class="modal-header" style="background-color: rgb(48, 53, 72);">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true" style="color: white;">&times;</span></button>
                    <h6 class="modal-title">新增监控</h6>
                </div>
                <div class="modal-body" style="height:360px;">
                    <table class="table table-td">
                        <tr>
                            <td>监控名称:</td>
                            <td><input type="text" name="name" style="width:220px;height: 40px;" class="form-control" required v-model="data_s.tdmc"
                                   ></td>
                        </tr>
                        <tr>
                            <td>监控编号:</td>
                            <td><input type="text" name="address" style="width:220px;height: 40px;"  class="form-control" v-model="data_s.sbbh"
                                       autocomplete="off" required></td>
                        </tr>
                        <tr>
                            <td>监控类型:</td>
                            <td>
                                <select  required style="width:220px;height: 40px;" class="form-control selectpicker"  name="tdlx"  v-model="data_s.tdlx">
                                    <option v-for="(item,index) in tdlxdata" :key="index"
                                            :value='item.id'>{{item.name}}</option>
                                </select>
                        </tr>
                        <tr>
                            <td>所属部门:</td>
                            <td>
                                <el-select :value="valueTitle" :clearable="isClearable" @clear="clearHandle">
                                    <el-option :value="valueTitle" :label="valueTitle" class="options">
                                        <el-tree
                                                id="tree-option"
                                                ref="selectTree"
                                                :accordion="isAccordion"
                                                :data="optionData"
                                                :props="props"
                                                :node-key="props.value"
                                                :default-expanded-keys="defaultExpandedKey"
                                                @node-click="handleNodeClick">
                                        </el-tree>
                                    </el-option>
                                </el-select>
                                <!--<input type="text" name="xzbh" style="width:280px;" class="form-control" v-model="data_s.xzbh"-->
                                       <!--autocomplete="off" required></td>-->
                        </tr>
                        <!--<tr>-->
                            <!--<td>RTSP/HLS地址:</td>-->
                            <!--<td><input type="text" name="address" style="width:280px;" class="form-control" v-model="data_s.squrllj"-->
                                       <!--autocomplete="off" required></td>-->
                        <!--</tr>-->

                    </table>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm" data-dismiss="modal" style="color: #2f2f2f;">关闭</button>
                    <button type="button submit" class="btn btn-sm btn-info" style="background-color: #368ff3" @click="define">确定
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <form onsubmit="return false;" class="form-horizontal" role="form" onkeydown="if(event.keyCode==13){return false;}">
        <div class="modal-dialog" role="document" :style="{width: widthdata}">
            <div class="modal-content" style="width: 100%;">
                <div class="modal-header" style="background-color: rgb(48, 53, 72);">
                    <button type="button" click="add_sjlx()" id="add"  class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true" style="color: white;" >&times;</span></button>
                    <h6 class="modal-title" style="color: white;">新增任务事件</h6>
                </div>
                <div class="modal-body" >
                    <table class="table table-td">
                        <tbody>
                        <tr>
                            <td rowspan="13"  v-show="cheakallornot==0">
                                <iframe   if="iframepic" src="/test" width="650" height="500"></iframe>
                            </td>
                        </tr>
                        <tr>
                            <td width="100px">任务名称</td>
                            <td width="240px"><input type="text" id="name" class="form-control">  </td>

                            </td>
                        </tr>
                        <tr>

                            <td width="100px">事件类型</td>
                            <td>
                                <select class="form-control" id="detectType" >
                                    <option th:value="20" >
                                        周界入侵
                                    </option>
                                    <option th:value="10" >
                                        人群密度
                                    </option>
                                    <option th:value="12" >
                                        结构化统计
                                    </option>
                                    <option th:value="13" >
                                        未戴头盔
                                    </option>
                                    <option th:value="14" >
                                        是否佩戴口罩
                                    </option>
                                </select>
                            </td>
                        </tr>
                        <tr>

                            <td width="100px">检测对象</td>
                            <!--1：人脸，2：机动车，3：非机动车，4：人-->
                            <td width="240px">
                                <select class="form-control" id="objectType">
                                    <option th:value="0" >
                                        所有
                                    </option>
                                    <option th:value="1" >
                                        人脸
                                    </option>
                                    <option th:value="2" >
                                        机动车
                                    </option>
                                    <option th:value="3" >
                                        非机动车
                                    </option>
                                    <option th:value="4" >
                                        人
                                    </option>
                                </select>
                            </td>  </tr>
                        <!--<tr>-->
                            <!--<td width="100px">视频输入类型</td>-->
                            <!--<td width="240px">-->
                                <!--<select class="form-control" id="tasktype">-->
                                    <!--</option>-->
                                    <!--<option th:value="1" >-->
                                        <!--rtsp地址-->
                                    <!--</option>-->
                                    <!--<option th:value="2" >-->
                                        <!--hls地址-->
                                    <!--</option>-->
                                <!--</select>-->
                            <!--</td>-->
                        <!--</tr>-->
                        </tr>

                        </tr>

                        <tr>
                            <td width="100px">执行开始时时刻</td>
                            <td width="240px"> <input type="number" class="form-control" max="23" min="0" id="starthour"> </td>
                        </tr>
                        <tr>
                            <td width="100px">执行结束时刻</td>
                            <td width="240px"> <input type="number" class="form-control" max="23" min="0" id="endhour"> </td>
                        </tr>
                        <tr>
                            <td width="100px">执行间隔(s)</td>
                            <td width="240px"> <input type="number" class="form-control" max="59" min="1" id="schedulerRule"> </td>
                        </tr>
                        <tr>
                            <td>告警阈值</td>
                            <td width="240px"><input type="number" id="thresholdValue" class="form-control" th:value="0">  </td>

                        </tr>
                        <tr id="threshold" >
                            <td>是否自动推送</td>
                            <td width="240px">
                                <select class="form-control" id="autosend">
                                    <option th:value="1" >
                                        是
                                    </option>
                                    <option th:value="0" >
                                        否
                                    </option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>是否全区域检测</td>
                            <td width="240px">
                                <select class="form-control" id="allarea" v-model="cheakallornot" @change="changewidth()">
                                    <option th:value="1" >
                                        是
                                    </option>
                                    <option th:value="0" >
                                        否
                                    </option>
                                </select>
                            </td>

                        </tr>

                        <tr  v-show="cheakallornot==0">
                            <td>识别区域(x,y,w,h)</td>
                            <td width="240px">
                                <input type="text" id="objectxy" class="form-control">
                                <a id="getwidth" href="javascript:void(0)"
                                   style="float: left;padding-left: 12px;padding-top: 10px;">刷新图片</a>
                            </td>
                        </tr>
                        <tr>
                            <td>告警回调地址</td>
                            <td colspan="1"><input type="text" class="form-control" id="url">   </td>
                        </tr>
                        </tbody>
                    </table>

                </div>



            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm" data-dismiss="modal" style="color: #2f2f2f;">关闭</button>
                <button type="button submit" class="btn btn-sm btn-info" style="background-color: #368ff3" onclick="define()">确定
                </button>
            </div>
        </div>

    </form>
</div>

</body>
<script src="../js/jquery-3.1.1.min.js"></script>
<script th:src="@{/lib/layui/layui.js}"></script>
<script th:src="@{/js/common.js}"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap/js/bootstrap-treeview.js"></script>
<script src="../bootstrap/js/bootstrap-paginator.js"></script>

<script src="../js/index/vue.js"></script>
<script src="../js/util/http_util.js"></script>
<script src="../element/element-ui.js"></script>
<script src="../js/jgsbgl/jgsbgl.js"></script>

<script>

    </script>

<style scoped>
    .el-scrollbar .el-scrollbar__view .el-select-dropdown__item{
        height: auto;
        max-height: 274px;
        padding: 0;
        overflow: hidden;
        overflow-y: auto;
    }
    .el-select-dropdown__item.selected{
        font-weight: normal;
    }
    ul li >>>.el-tree .el-tree-node__content{
        height:auto;
        padding: 0 20px;
    }
    .el-tree-node__label{
        font-weight: normal;
    }
    .el-tree >>>.is-current .el-tree-node__label{
        color: #409EFF;
        font-weight: 700;
    }
    .el-tree >>>.is-current .el-tree-node__children .el-tree-node__label{
        color:#606266;
        font-weight: normal;
    }
</style>
</html>