<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <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" href="../bootstrap/css/bootstrap.css">
    <link href="../bootstrap/css/bootstrap-table.css" rel="stylesheet" />
    <link href="../bootstrap/themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="../bootstrap/css/fileinput.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/editarea.css">
    <title>场所管理</title>
    <style>
        select {
        /*清除select默认样式*/
         appearance:none;
         -moz-appearance:none;
         -webkit-appearance:none;
         -ms-appearance:none;
         border:1px solid #CCC;
         width:130px;
         height:34px;
         /*自定义箭头的样式，记得背景一定要加 白色或其他*/
         background:url("../img/select.png") no-repeat scroll right center #fff;
         /*ie下,原默认的箭头样式还是会显示，所以这里把自定义的样式给去除了*/
      }
      input.(type='file', ng-file-select='install($files)',style='opacity:0;filter:alpha(opacity=0);')

      #associatemonitor ul{list-style:none}
      #associatemonitor li{
          list-style:none;
          margin-top: 10px;
      }
      #associatemonitor li:hover{
          background-image: red;
       }
       .zp-div:hover{
            box-shadow: 0 2px 10px rgba(236, 1, 1, 0.2);
            transform: translate3d(0, -2px, 0);
            transition: .5s; 
       }
       .zp-div{
            width:100%;
            height:200px;
            margin-top:5px;
        }
        .zpleft-div{
            width: 48%;
            height: 600px;
            float: left;
            border-right: 1px solid #da7065; 
            overflow-x: hidden;
            overflow-y: auto;
        }
        .zpright-div{
            width: 52%;
            height: 600px;
            float: left;
            overflow: auto;
        }
    </style>
</head>
<body>
   <div id="main_div">
       <div class="bottom_nav">
           <div id="myMap"></div>
       </div>
   </div>

   <!--  底部弹框 -->
   <div id="BottomBar" class="bottomBar opacity0" style="display:none;">
       <span id="bottomClickSpan" onclick="bottomClickSpan()" class="glyphicon glyphicon-option-horizontal opration-handler" aria-hidden="true"></span>
       <div class="table_div">
           <span>场所类型：</span>
            <select id="areatype"  class="sel">
              
            </select>
          <button type="button"   class="btn btn-default" id="addData" onclick="addarea()">  新增
              <span class="glyphicon glyphicon-plus"></span>  
           </button> 
           <table id="areatable" style="color:white"></table>
       </div>
   </div>

   <!-- 场所编辑框 -->
   <div class="modal fade" tabindex="-1" role="dialog" id="csbjk">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" v-text="vtitle" style="text-align:center;"></h4>
                </div>
                <div class="modal-body" style="max-height:500px;overflow-y: auto;">
                    <table class="table table-striped ">
                            <!-- 基础信息 -->
                            <tr >
                                    <td   style="text-align:center;vertical-align: middle;">基础名称</td>
                                    <td><input type="text" v-model="item_base.name"  class="form-control"  ></td>
                            </tr>
                            <tr >
                                    <td   style="text-align:center;vertical-align: middle;">基础经度</td>
                                    <td><input type="number" v-model="item_base.x"  class="form-control"  ></td>
                            </tr>
                            <tr >
                                    <td   style="text-align:center;vertical-align: middle;">基础纬度</td>
                                    <td><input type="number" v-model="item_base.y"  class="form-control"  ></td>
                            </tr>
                            <tr >
                                    <td   style="text-align:center;vertical-align: middle;">基础空间属性</td>
                                    <td>
                                        <input type="text" v-model="item_base.wkt"  class="form-control"  >
                                        <input type="file" accept=".wkt" onchange="getWKT(this)"> 
                                    </td>
                            </tr>
                         <!-- 更多信息 -->
                         <tr v-for="(item,index) in item_detail">
                             <td v-text="item.comments!=null?item.comments:'暂无'" style="text-align:center;vertical-align: middle;"></td>
                             <td><input type="text" v-model="(!item.data&&item.key== 'id')?myId:item.data"  class="form-control" :disabled='item.key == "id"'></td>
                         </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" @click="save()" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" role="dialog" id="associatemonitor">
        <div class="modal-dialog" role="document">
                <div class="modal-content">
                        <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title"  style="text-align:center;">关联监控</h4>
                        </div>
                        <div class="modal-body" style="max-height:500px;overflow-y: auto;">     
                             <p>可选择的监控</p>
                             <div style="height:320px;overflow-y: auto">
                                  <ul>
                                      <li v-for="(item,index) in cpd_allmonitor">
                                            <span>{{item.name}}</span>
                                            <!-- <button @click="associatemonitor(item,'add')">添加</button> -->
                                            <img style="height:20px;cursor: pointer;"  @click="associatemonitor(item,'add')" src="../img/associate_add.png">
                                      </li>
                                  </ul>
                             </div>
                             <div style="height:6px">
                          -------------------------------------------------------------------------------------------------------------------
                            </div>
                             <div style="height:100px;overflow-y: auto;margin-top:10px">
                                    <p>已关联的监控</p>
                                    <ul>
                                        <li v-for="(item,index) in datax_selectedmonitor">
                                                <span>{{item.name}}</span>
                                                <!-- <button @click="associatemonitor(item,'delete')">删除</button> -->
                                                <img style="height:20px;cursor: pointer;" @click="associatemonitor(item,'delete')" src="../img/associate_delete.png">
                                        </li>
                                    </ul>
                            </div>

                        </div>
                        <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                 
                        </div>
                </div>
        </div>
    </div>

    <!-- //照片上传弹出层 -->
    <div class="modal fade" role="dialog" id="photosid" >
        <div class="modal-dialog" role="document" style="width:1200px;">
            <div class="modal-content"> 
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"  style="text-align:center;">照片管理</h4>
                </div>
                <div class="modal-body" style="max-height:700px;overflow-y:auto;" id="zpid"> 
                     <div class="zpleft-div">
                         <div style="height:25px;"><span class="label label-primary">现有照片</span></div>
                        <div class="row">
                            <div v-for="(item,index) in photosj">
                                <div class="col-xs-6 col-md-4" style="height:250px;border: 1px solid #d8bebe;">
                                    <div class="zp-div">
                                        <img  v-bind:src="item.src" style="width:100%;height:100%;cursor:pointer;" @click="photoBig(item)" title="点击放大">     
                                    </div> 
                                    <div style="margin-top:5px;">
                                            <span style="font-size:10px;color:#4ece4e;">{{item.alt}}</span></span>  
                                            <img title="删除照片" uploadUrl="" src="../img/associate_delete.png" @click="deletePhoto(item)" style="height: 14px; cursor: pointer;">                        
                                        <!-- <button type="button" class="btn btn-danger" style="float:right;" @click="deletePhoto(item)">删除</button> -->
                                    </div> 
                                </div>  
                            </div>
                        </div>
                     </div>
                     <div class="zpright-div">
                            <div style="height:25px;margin-left:15px;"><span class="label label-warning">待上传照片</span></div>
                            <div class="container kv-main" style="margin-top:-20px;width:590px">
                                <br>
                                <!-- <form enctype="multipart/form-data">                                
                                    <div class="form-group">
                                       
                                    </div>                                      
                                </form> -->
                                <input id="file-Portrait1"  type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1">
                            </div>                        
                     </div>   
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>                       
                </div>
            </div>
    </div>
</body>
<script src="../js/jquery-2.2.3.js"></script>
<script src="../js/vue.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<!--<script src="bootstrap/js/bootstrap-datetimepicker.js"></script>
<script src="bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>-->
<script src="../bootstrap/js/bootstrap-table.js"></script>
<script src="../bootstrap/js/bootstrap-table-export.js"></script>
<script src="../bootstrap/js/tableExport.js"></script>
<script src="../bootstrap/js/fileinput.js"></script>
<script src="../bootstrap/js/zh.js"></script>
<!-- <script src="../bootstrap/js/fileinput_locale_zh.js"></script> -->
<script src="../js/layui/layui.js"></script>

<script src="../js/terraformer/terraformer.js"></script>
<script src="../js/terraformer/terraformer-wkt-parser.js"></script>
<script src="../js/mapInit.js"></script>
<script src="../js/http_request.js"></script>
<script>
    var community_conf=JSON.parse(' <%-JSON.stringify(community_conf)%>');   

</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_src/editarea_src.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>
</html>