{% extends "appCenter/InterpretDataText/temp.html" %}

{% block title %}
<title>文本标注</title>
{% endblock %}

{% block link %}
<link rel="stylesheet" href="{{ pathPrefix }}/plugins/scrollbar/jquery.scrollbar.css">
<link rel="stylesheet" href="{{ pathPrefix }}/plugins/ztree/zTreeStyle.css">
<link rel="stylesheet" href="{{ pathPrefix }}/plugins/ol4/ol.css">
<link rel="stylesheet" href="{{ pathPrefix }}/plugins/ol4/ext/ol-ext.min.css">
<link rel="stylesheet" href="{{ pathPrefix }}/css/appCenter/InterpretDataText/dataSelect.css">
<link rel="stylesheet" href="{{ pathPrefix }}/css/appCenter/InterpretDataText/markLabel.css">

{% endblock %}

{% block script %}
<script src="{{ pathPrefix }}/plugins/scrollbar/jquery.scrollbar.min.js"></script>
<script src="{{ pathPrefix }}/js/appCenter/InterpretData/common/bootstrap-pager.js"></script>
<script src="{{ pathPrefix }}/plugins/ol4/ol.js"></script>
<script src="{{ pathPrefix }}/plugins/ol4/turf.min.js"></script>
<script src="{{ pathPrefix }}/plugins/ol4/ext/ol-ext.min.js"></script>
<script src="{{ pathPrefix }}/plugins/ztree/jquery.ztree.all.min.js"></script>
<script src="{{ pathPrefix }}/plugins/echarts/echarts.min.js"></script>
<script src="{{ pathPrefix }}/plugins/daterangepicker/moment.min.js"></script>
<script src="{{ pathPrefix }}/js/common/dataSelect.js"></script>
<script src="{{ pathPrefix }}/js/common/map2dTools.js"></script>
<script src="{{ pathPrefix }}/js/common/selectBaseMap.js"></script>
<script src="{{ pathPrefix }}/js/common/mark/mark.min.js"></script>
<script src="{{ pathPrefix }}/js/appCenter/InterpretDataText/markLabel.js"></script>

{% endblock %}

{% block content %}
<div id="dataTextBox">
  <!-- 新建标签 -->
  <div class="modal fade" role="dialog" tabindex="-1" id="new_label_dialog">
    <div class="modal-dialog" style="width: 480px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <p class="modal-title" style="color:#303133;font-size: 16px;;font-weight:600;">添加标签</p>
            </div>
            <div class="modal-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label for="label_cls_name" class="col-sm-2 control-label" style="color:#303133;font-size: 16px;">标签名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" autocomplete="off" id="label_cls_name" placeholder="请输入标签名" style="width: 300px;">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="label_cls_fill" class="col-sm-2 control-label" style="color:#303133;font-size: 16px;">填充色</label>
                        <div class="col-sm-2">
                            <input type="color" class="form-control" id="label_cls_fill" placeholder="请选择填充颜色">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="create_label">
                    <span class="fa fa-save fa-fw"></span> 保存
                </button>
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">
                    <span class="fa fa-close fa-fw"></span> 取消
                </button>
            </div>
        </div>
    </div>
  </div>
  <!-- 删除标签 -->
  <div class="modal fade" role="dialog" tabindex="-1" id="delete_label_dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <p class="modal-title" style="color:#303133;font-size: 16px;;font-weight:600;">删除标签</p>
            </div>
            <div class="modal-body">
                <p style="color:#303133;font-size: 16px;">是否要删除该标签：                
                  <span class="name" style="color:#303133;font-size: 16px;">农田</span>
                  <span id="idLabel" style="color:white;font-size:16px;">0</span>
                </p>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="delete_label">
                    <span class="fa fa-trash-o fa-fw"></span> 删除
                </button>
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">
                    <span class="fa fa-close fa-fw"></span> 取消
                </button>
            </div>
        </div>
    </div>
  </div>
  <!-- 弹出框 -->
  <div class="modal fade" role="dialog" tabindex="-1" id="echarts_label_dialog">
    <div class="modal-dialog modal-sm" style="width: 480px;">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <p class="modal-title" style="color:#303133;font-size: 16px;;font-weight:600;">关系图谱</p>
          </div>
          <div id="main" style="width: 480px;height:200px;"></div>
        </div>
    </div>
  </div>
  <!-- 编辑标签 -->
  <div class="modal fade" role="dialog" tabindex="-1" id="edit_label_dialog">
    <div class="modal-dialog modal-sm" style="width: 500px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <p class="modal-title" style="color:#303133;font-size: 16px;;font-weight:600;">修改标签名称</p>
            </div>
            <div class="modal-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label" style="color:#303133;font-size: 16px;;font-weight:600;">标签名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control name" autocomplete="off" placeholder="请输入标签名称">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="edit_label">
                    <span class="fa fa-save fa-fw"></span> 确定
                </button>
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">
                    <span class="fa fa-close fa-fw"></span> 取消
                </button>
            </div>
        </div>
    </div>
  </div>

  <!-- 新建标签 -->
  <div class="modal fade" role="dialog" tabindex="-1" id="new_rel_dialog">
    <div class="modal-dialog" style="width: 480px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <p class="modal-title" style="color:#303133;font-size: 16px;;font-weight:600;">添加关系</p>
            </div>
            <div class="modal-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label for="label_cls_name" class="col-sm-2 control-label" style="color:#303133;font-size: 16px;">关系名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" autocomplete="off" id="label_rel_name" placeholder="请输入关系名" style="width: 300px;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="create_rel">
                    <span class="fa fa-save fa-fw"></span> 保存
                </button>
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">
                    <span class="fa fa-close fa-fw"></span> 取消
                </button>
            </div>
        </div>
    </div>
  </div>



  <!-- 头部操作 -->
  <div class="header">
    <div class="headerTitle" id="headerMarkTitle">22</div>
    <button type="button" id="closeBtn" class="btn btn-default btnHeader" style="position: fixed;right:20px;margin-left:8px;width:100px;height:36px;border-radius: 4px;">
      <span style="font-size:16px;color: #3497DA;" id="backBtn">
        <i class="fa fa-arrow-circle-left" style="font-size:14px;"></i> 返回列表
      </span>
    </button>
  </div>
  <!-- 标注内容 -->
  <div class="container">
    <div class="left">
      <div class="leftTop">
         <div class="leftHeaderTop" id="leftHeaderTop"></div>
         <div id="text-container" style="padding: 16px;"></div>
      </div>
      <div class="leftBottom">
        <div class="radio-list-container">
          <div class="scroll-button left1">◀</div>
          <div class="radio-list">
            <div class="radio-group">
            </div>
          </div>
          <div class="scroll-button right1">▶</div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="containerRight">
        <div class="top">
          <div class="headerBottom">标签列表
            <button type="button" class="btn btn-link" title="添加标签" id="new_label" style="float: right;"><i class="fa fa-plus-circle" style="font-size:16px;color:white;"></i></button>
          </div>
          <div class="list">

          </div>
        </div>
        <div class="bottom">
          <div class="headerBottom">标注结果
            <input type="text" autocomplete="off"  placeholder="输入组别" class="groupId" id="groupId"  style="color:#606266;width:100px;margin-left:16px;border: 1px solid #ccc;border-radius:4px;font-size:18px">
            <button type="button" class="btn btn-link del" title="清除" id="clearBtn" style="float: right;"><i class="fa fa-trash-o" style="font-size:16px;color:white;"></i></button>
            <button type="button" class="btn btn-link save" title="保存" id="saveBtn" style="float: right;"><i class=" fa fa-save" style="font-size:16px;color:white;"></i></button>
            <button type="button" class="btn btn-link download" title="下载当前的标注结果" id="downloadBtn" style="float: right;"><i class=" fa fa-download" style="font-size:16px;color:white;"></i></button>
          </div>
          <ul id="list" class="markContent"></ul>
        </div>
        <div class="footer">
          <div class="headerBottom">关系列表
            <select id="number-select" class="custom-select"></select>
            <!-- <input type="text" autocomplete="off"  placeholder="输入关系信息" class="inputRealation" id="inputRealation" style=""> -->
            <button type="button" class="btn btn-link upload" title="合并" id="unionBtn" style="float: right;"><i class=" fa fa-upload" style="font-size:16px;color:white;"></i></button>
            <button type="button" class="btn btn-link save" title="保存" id="saveRealationBtn" style="float: right;"><i class=" fa fa-save" style="font-size:16px;color:white;"></i></button>
            <button type="button" class="btn btn-link download" title="下载" id="downloadRealationBtn" style="float: right;"><i class=" fa fa-download" style="font-size:16px;color:white;"></i></button>
            <button type="button" class="btn btn-link download" title="添加标签" id="addBtn" style="float: right;"><i class=" fa fa-plus" style="font-size:16px;color:white;"></i></button>
          </div>
          <ul id="markContentGuanxi" class="markContentGuanxi"></ul>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}