<!DOCTYPE html>
<html>

<head>
    <title>监控管理</title>
    <style>
        html,
        body {
            height: 100%;
            margin:0px;
        }
        .headtool {
            height: 38px;
            margin-bottom:0px;
        }

        .headtool a span{
            margin-top: 2px!important;
            position: relative;
            color: white; 
        }
        a{
            cursor: pointer;
        }

        .main {
            height: calc(100% - 150px);
            border:1px solid #000;
            min-width: 1527px;
        }

        .tablehead_div{
            height: 40px;
            background-color: #61ABDD;
        }

        .tablebody_div{
            height: calc(100% - 55px);
            overflow-y: auto;
        }

         table{
            border-collapse: collapse;
        }

        table tbody{
            table-layout: fixed
        }

        table tbody tr{
            height: 30px;
        }
        table tbody tr:hover{
            background-color: #f2f2f2;
        }
        table tbody td, table th{
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }
        table thead th{
            background-color: #61ABDD;
            height: 40px;
        }
        table tr:nth-child(odd) {
            background: #fff;
        }
        table tr:nth-child(even) {
            background: #F5FAFA;
        }

        td.long, th.long{
            width: 308px;
            text-align: center
        }
        td.short, th.short{
             width: 168px;
             text-align: center
        } 

        #editck   div.inputform{
            margin-top: 10px;
            margin-left: 10px;
        }

         #editck   div >input{
           width: 348px;
           height: 25px;
        }
        button{
            width: 70px;
            height: 31px;
            background: #61abdd;
            border-radius: 1.3em;
            cursor: pointer;
        }

        #geometrydiv{
            border: 2px dashed #079bff;
            margin-left: 7px;
            margin-right: 43px;
        }
    </style>
     <link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css"/>
     <link rel="stylesheet" type="text/css" href="/arcgisjsapi/library/3.23/3.23/esri/css/esri.css" />
     <!-- <link rel="stylesheet" type="text/css" href="http://61.155.110.210:7004/arcgis_js_api/library/3.23/3.23/esri/css/esri.css" /> -->
     <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css" />
    <script src="../js/vue.js"></script>
</head>

<body>
   <div id="vuediv" style="height:100%;margin-left: 5px">
           <div class="headtool">
                <div class="layui-btn-group" style="float:left">
                    <button class="btn btn-primary" @click="insert()" >增加</button>
                    <button class="btn btn-primary" @click="exportExcel()"  >导出</button>
                    <button class="btn btn-primary" @click="printTable()"  >打印</button>
                 </div>
                 <div class="layui-input-block" style="float:left">
                   <input type="text" name="title" lay-verify="title" autocomplete="off" v-model="searchText" placeholder="筛选" class="layui-input">
                 </div>
            </div>
            <div class="main" id="main">
                <div class="tablehead_div">
                    <table cellspacing="0" cellpadding="0" border="0" >
                        <thead>
                            <tr>
                                <th class="short" style="width: 40px">序号</th>
                                <th class="long">监控名称</th>
                                <th  class="short">经度</th>
                                <th class="short">纬度</th>
                                <th class="short">方位角</th>
                                <th class="short">IP</th>
                                <th class="long">URL</th>
                                <th class="short">编辑</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="tablebody_div">
                    <table cellspacing="0" cellpadding="0" border="0"  id="monitorId">
                        <tbody>
                            <tr v-for="(item,index) in data_filter ">
                                <td style="text-align:center;width: 40px" class="short" v-text="index+1"></td>
                                <td  class="long"><span v-text="item.name"></span></td>
                                <td class="short"><span  v-text="item.x"></span></td>
                                <td class="short"><span  v-text="item.y"></span></td>
                                <td class="short"><span  v-text="item.angle"></span></td>
                                <td class="short"><span  v-text="item.ip"></span></td>
                                <td  class="long"><span v-text="item.url"></span></td>
                                <td  class="short" style="text-align:center;text-decoration:underline">
                                    <a @click="edit(item,index)">编辑</a>
                                    <a @click="deletex(item,index)">删除</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
   </div>

<div id="editck" style="display:none">
    <div class="inputform">
        <span>名&emsp;称</span>
        <input v-model="xq.name">
    </div>
    <div class="inputform"><span>空间数据<a @click="openmap()" style="color: blue;font-weight: bold;text-decoration:underline">(高级设置)</a></span></div>
    <div  id="geometrydiv">
        <div class="inputform">
            <span>经&emsp;度</span>
            <input type="number" v-model="xq.x" style="width:300px" id="xid">
        </div>
        <div class="inputform">
            <span>纬&emsp;度</span>
            <input type="number" v-model="xq.y" style="width:300px" id="yid">
        </div>
        <div class="inputform" style="margin-bottom: 10px">
             <span>方位角</span>
             <input type="number"  v-model="xq.angle" style="width:300px">
        </div>
        <div class="inputform" style="margin-bottom: 10px">
            <span>网&emsp;格</span>
            <select style="width: 200px;" v-model="chosseselected" @change="wgchange($event)" id="wgid">
                <option v-for="(item,index) in wgdata" v-text="item.gridman" :value="item.id"></option>
            </select>
            <button type="button" class="layui-btn layui-btn-warm" style="float:right;height:26px;margin-right:41px;margin-top: -3px;line-height: 26px;" @click="jysj()">校验</button>
       </div>
      </div>
      <div class="inputform">
            <span>IP&emsp;&emsp;</span>
            <input v-model="xq.ip">
        </div>
        <div class="inputform">
                <span>序列号</span>
                <input v-model="xq.url">
         </div>
</div>
<div id="map" style="display:none;height: 500px;">
    <div class="change_angle">
        <span style="float:left;height: 30px;font-size:17px">角度:</span>
        <input type="range" min="0" max="360" id="angle_num" step="1" style="width: 250px;margin-left: 15px;height: 30px;text-align: center;float: left;">
        <p class="fz-angle" style="width: 50px;float: left;margin-left: 20px;border: 1px solid darkgreen;text-align: center;height: 20px;line-height: 20px;"></p>
        <a id="newmonitor" style="margin-left: 20px;float:left;height: 30px;text-decoration:underline" onclick="newMonitor()">新增监控</a>
    </div>          
</div>

</body>
<script src="../js/http_request.js"></script>
<script src="../js/jquery-2.2.3.js"></script>
<script src="../js/layui/layui.js"></script>
<script src="../js/exportexcelandprint.js"></script>
<script src="../js/terraformer/terraformer.js"></script>
<script src="../js/terraformer/terraformer-wkt-parser.js"></script>
<script src="/arcgisjsapi/library/3.23/3.23/init.js"></script>
<!-- <script src="http://61.155.110.210:7004/arcgis_js_api/library/3.23/3.23/init.js"></script> -->
<script src="../js/mapInit.js"></script>
<script type="text/javascript">
    var dojoConfig = {
        async: true,//这个参数一定要设置，必须要设置true;
        parseOnLoad: true,
        packages: [{ //解释：require(["js/.."],function(){}) 中  js/ 即为 location的值
            name: "bdlib", //对应require引用包里的js
            location: location.pathname.replace(/\/[^/]+$/, "") + "/bdlib" //对应的路径
        }]
    };
</script>
<script>
    dojo.require("esri.toolbars.draw");
    dojo.require("esri.toolbars.edit");
    var myMap=null;
    layui.use(['element', 'layer'], function(){
       var layer = layui.layer;    
       querycommunity();
    });

    var vue1 = new Vue({
        el: '#vuediv',
        data: {
            datax: [],
            searchText:"",
        },
        methods: {
            insert:function(){              
                vue2.xq={id:uuid(),name:'',ip:0,x:0,y:0,url:'',angle:0};
                vue2.chosseselected="";
                setdata("0",result=>{
                      this.datax.unshift(vue2.xq);
                });
            },
             edit:function(item,index){
                vue2.chosseselected=item.gridid;
                vue2.xq= Object.assign({}, item);
                setdata("2",result=>{
                    Vue.set(this.datax, this.datax.arrfindindex(vue2.xq,"id"), vue2.xq)
                });
             },
             deletex:function(item,index){
                layer.confirm('确定要删除吗？不可恢复!', {
                            btn: ['确定', '取消'] //按钮
                        }, function (obj) {//确定删除 
                            postByAjax('../edit/monitordata/1', item, result => {
                                vue1.datax.splice(index, 1);
                                 layer.msg('操作成功');
                             });
                            layer.close(index);
                        });       
             },
             exportExcel:function(){
                exportExcel("monitorId");
             },
             printTable:function(){
                printTable("monitorId");
             }
        },
        computed:{
            data_filter:function(){
                  if(this.searchText){
                     var temp = [];
                     for (var i = 0; i < this.datax.length; i++) {
                         if (this.datax[i].name&&this.datax[i].name.strcontains(this.searchText)) {
                              temp.push(this.datax[i]);
                         }
                     }
                      return temp;
                  }
                  return this.datax;
            }
        }
    });

   //查询监控列表
    getByAjax("../business/spjk", result => {
        vue1.datax = result;
    });

    //打开监控编辑界面
    function setdata(type,callback){
        layer.open({
                    type: 1,
                    title: '<span class="layer_add_person">监控</span>',
                    area: ['450px', '400px'], //宽高
                    content: $("#editck"),
                    offset: ['180px'],
                    btn: ["保存", "取消"],
                    yes: function (layindex) {
                        let str=$("#wgid").val();
                            if(!vue2.xq.id){
                                layer.msg('Id不能为空');
                                return;
                            }else if(str==null){
                                layer.msg('请选择网格或者校验');
                            }else{
                                postByAjax('../edit/monitordata/'+type, vue2.xq, result => {
                                layer.closeAll();
                                    if(result==1){
                                        layer.msg('操作成功');
                                        callback(result);
                                    }else{
                                        layer.msg('操作失败');
                                    }
                                });
                            }
                }
            });
    }
    /*
    *地图
    */
       //加载地图
    var community_conf=JSON.parse(' <%-JSON.stringify(community_conf)%>');
    dojo.ready(function(){
        community_conf.map.forEach(function(val,inde,array){

          if(val.url.indexOf("http")<0 &&  val.url.indexOf("https")<0){               
                val.url="../"+val.url;
             }        
          //  val.url="../"+val.url;
              //test
           // val.url=val.url;
        });
        createMapLoad("map", community_conf.extent, community_conf.map,  function(map){
            myMap=map;
            edit = new esri.toolbars.Edit(map);
            edit.on("graphic-click", editEnd);
            toolbar = new esri.toolbars.Draw(map);
            toolbar.on("draw-end", addToMap);
            myMap.graphics.on("click",function(evt){
                myMap.infoWindow.setTitle("监控");
                myMap.infoWindow.setContent("<br /><a style='cursor: pointer' onclick='editStart()'>编辑经纬度</a>");
                myMap.infoWindow.show(myMap.toScreen(evt.graphic.geometry));
            });
        });
    });

     var vue2 = new Vue({
        el: '#editck',
        data: {
            xq:{ name:'',x:0,y:0,ip:'',angle:0,url:'',gridid:''},
            chosseselected:"",
            graphic:null,
            wgdata:[],
            choosePoint:null,
        },
        methods: {
            openmap:function(){
                open_map(this.xq);
            },
            jysj:function(){
                var wgx=$("#xid").val();
                var wgy=$("#yid").val();
                for(var i=0;i<this.wgdata.length;i++){
                    var myGeometry = new esri.geometry.Polygon({//其他网格遮盖
                        rings: (Terraformer.WKT.parse(this.wgdata[i].wkt)).coordinates,
                        spatialReference: { wkid: 4326 }
                    });                  
                    if(this.xq.x==0||this.xq.y==0){
                        layer.msg("经纬度不能为空");
                        break;
                    }else{
                        var point=new esri.geometry.Point(wgx, wgy, new esri.SpatialReference({ wkid: 4326 }))
                        var iscontain=myGeometry.contains(point);
                        if(iscontain){
                            this.chosseselected=this.wgdata[i].id;
                            this.xq.gridid=this.chosseselected;
                            break;
                        }
                    }
                }             
            },
            wgchange:function(event){
                this.xq.gridid= event.target.value;
            },
        }
    });
    
    //打开地图界面
    function open_map(monitor){
        //初始化方位角控制器
       var trackBar = document.getElementById("angle_num");
       $(".fz-angle").text((!monitor.angle?"":monitor.angle)+'°');
       trackBar.value=(!monitor.angle?0:monitor.angle);
       trackBar.min = 0;
       trackBar.max = 360;
       trackBar.step = 1;

        myMap.graphics.clear();
        if(monitor.x&&monitor.y){
            document.getElementById("newmonitor").style.display="none";
            var symbolx=new esri.symbol.PictureMarkerSymbol("../img/" + "monitor.png", 25, 25).setAngle((monitor.angle?monitor.angle:0));
            var point=new esri.geometry.Point(monitor.x, monitor.y);
            vue2.graphic =new esri.Graphic(point,symbolx);
            myMap.graphics.add(vue2.graphic);
            myMap.centerAndZoom(point, 20);
        }else{
            document.getElementById("newmonitor").style.display="block";
        }

        layer.open({
            type: 1,
            title: '<span class="layer_add_person">监控</span>',
            area: ['950px', '600px'], //宽高
            content: $("#map"),
            offset: ['180px'],
            btn: ["关闭"]
        });
    }
   //方位角控制器事件
    var trackBar = document.getElementById("angle_num");
    trackBar.addEventListener("input",function() {
        vue2.xq.angle=parseInt(this.value);
        $(".fz-angle").text(this.value+'°');
        myMap.infoWindow.hide();
        var mySymbol=vue2.graphic.symbol;
        mySymbol.setAngle(parseInt(this.value));
        vue2.graphic.setSymbol(mySymbol);
 });
//编辑点位
  function editStart() {
     edit.activate(esri.toolbars.Edit.MOVE, vue2.graphic);
     myMap.infoWindow.hide();
 }
//编辑完成
function editEnd(evt) {
    edit.deactivate();
    vue2.xq.x = evt.info.mapPoint.x;
    vue2.xq.y = evt.info.mapPoint.y;
    layer.msg('已经获取监控经纬度');
}

 //新增点位
 function  newMonitor(){
    toolbar.activate(esri.toolbars.Draw.POINT);
    myMap.hideZoomSlider();
 }
 //新增完成
function addToMap(evt) {
    toolbar.deactivate();
    vue2.xq.x=evt.geometry.x;
    vue2.xq.y=evt.geometry.y;
    vue2.xq.angle=0;
    let tempGraphic=new esri.Graphic(evt.geometry, new esri.symbol.PictureMarkerSymbol("../img/monitor.png", 25, 25));
    myMap.graphics.add(tempGraphic);
    vue2.graphic=tempGraphic;
    vue2.choosePoint=tempGraphic;
}

function querycommunity(){
    getByAjax("../rest/gridquery/xwsq", result => {
        vue2.wgdata = result.grid;
    });
}
</script>
</html>
