Browse Source

更新布局

Chente 6 years ago
parent
commit
d7bc2af19f
2 changed files with 338 additions and 141 deletions
  1. 1 0
      css/main.css
  2. 337 141
      main.html

+ 1 - 0
css/main.css

@@ -283,6 +283,7 @@ body {
 .ztree-warp {
   height:200px;
   overflow: auto;
+  border:1px solid #ddd;
 }
 .sub-button{
   position:sticky;

+ 337 - 141
main.html

@@ -54,22 +54,28 @@
                     <div class="container-fluid">
                       <div class="row">
                         <!-- 报表设置 -->
-                        <div class="col-lg-6 p-0">
+                        <div class="col-lg-12 p-0">
                           <ul class="nav nav-tabs tools-bar px-1" role="tablist">
                               <li class="nav-item">
-                                  <a class="nav-link p-1 active" data-toggle="tab" href="#mbxx" role="tab">模板信息</a>
+                                  <a class="nav-link active" data-toggle="tab" href="#mbxx" role="tab">模板信息</a>
                               </li>
                               <li class="nav-item">
-                                  <a class="nav-link p-1" data-toggle="tab" href="#mbbj" role="tab">模板布局</a>
+                                  <a class="nav-link" data-toggle="tab" href="#mbbj" role="tab">模板布局</a>
                               </li>
                               <li class="nav-item">
-                                  <a class="nav-link p-1" data-toggle="tab" href="#zbys" role="tab">指标映射</a>
+                                  <a class="nav-link" data-toggle="tab" href="#zbys" role="tab">指标映射</a>
                               </li>
                               <li class="nav-item">
-                                  <a class="nav-link p-1" data-toggle="tab" href="#zbbf" role="tab">指标摆放</a>
+                                  <a class="nav-link" data-toggle="tab" href="#zbbf" role="tab">指标摆放</a>
                               </li>
                               <li class="nav-item">
-                                  <a class="nav-link p-1" data-toggle="tab" href="#jss" role="tab">计算式</a>
+                                  <a class="nav-link" data-toggle="tab" href="#sjcl" role="tab">数据预处理</a>
+                              </li>
+                              <li class="nav-item">
+                                  <a class="nav-link" data-toggle="tab" href="#jss" role="tab">计算式</a>
+                              </li>
+                              <li class="nav-item">
+                                  <a class="nav-link" data-toggle="tab" href="#mbdx" role="tab">模板JS对象</a>
                               </li>
                           </ul>
                           <div class="tab-content">
@@ -79,71 +85,42 @@
                                   <div class="p-3">
                                     <div class="form-group">
                                       <label>报表名称</label>
-                                      <input class="form-control" placeholder="输入报表名称">
+                                      <input class="form-control form-control-sm" placeholder="输入报表名称">
                                     </div>
                                     <div class="form-group">
                                       <label>页面</label>
                                       <div class="row">
-                                        <div class="input-group col-6">
+                                        <div class="input-group input-group-sm col-4">
                                           <div class="input-group-addon">纸张</div>
                                           <select class="form-control input-sm"><option>A3</option><option>A4</option></select>
                                         </div>
-                                        <div class="input-group col-6">
+                                        <div class="input-group input-group-sm col-4">
                                           <div class="input-group-addon">方向</div>
                                           <select class="form-control input-sm"><option>横向</option><option>竖向</option></select>
                                         </div>
-                                      </div>
-                                    </div>
-                                    <div class="form-group row">
-                                      <div class="input-group col-6">
+                                        <div class="input-group input-group-sm col-4">
                                         <div class="input-group-addon">单位</div>
                                         <select class="form-control input-sm"><option>CM</option></select>
                                       </div>
+                                      </div>
                                     </div>
                                     <div class="form-group">
                                       <label>显示调整</label>
                                       <div class="row">
-                                        <div class="input-group col-6">
+                                        <div class="input-group input-group-sm col-4">
                                           <div class="input-group-addon">分栏</div>
                                           <select class="form-control input-sm"><option>1</option><option>2</option></select>
                                         </div>
-                                        <div class="input-group col-6">
-                                          <div class="input-group-addon">缩放</div>
-                                          <input class="form-control input-sm" type="number" step="1">
-                                        </div>
-                                      </div>
-                                    </div>
-                                    <div class="form-group row">
-                                      <div class="input-group col-6">
-                                        <div class="input-group-addon">空行提上</div>
-                                        <select class="form-control input-sm"><option>提上</option></select>
-                                      </div>
-                                      <div class="input-group col-6">
-                                        <div class="input-group-addon">空行显示</div>
-                                        <select class="form-control input-sm"><option>提上</option></select>
-                                      </div>
-                                    </div>
-                                    <div class="form-group">
-                                      <label>页边距</label>
-                                      <div class="row">
-                                        <div class="input-group col-6">
-                                          <div class="input-group-addon">左</div>
-                                          <input class="form-control input-sm" type="number" step="1">
-                                        </div>
-                                        <div class="input-group col-6">
-                                          <div class="input-group-addon">右</div>
-                                          <input class="form-control input-sm" type="number" step="1">
-                                        </div>
                                       </div>
                                     </div>
-                                    <div class="form-group row">
-                                      <div class="input-group col-6">
-                                        <div class="input-group-addon">上</div>
-                                        <input class="form-control input-sm" type="number" step="1">
+                                    <div class="row">
+                                      <div class="form-group col-4">
+                                      <label>显示行-高度</label>
+                                        <input class="form-control form-control-sm">
                                       </div>
-                                      <div class="input-group col-6">
-                                        <div class="input-group-addon">下</div>
-                                        <input class="form-control input-sm" type="number" step="1">
+                                      <div class="form-group col-4">
+                                      <label>显示列 - 宽度</label>
+                                        <input class="form-control form-control-sm">
                                       </div>
                                     </div>
                                   </div>
@@ -153,139 +130,358 @@
                               <div class="tab-pane" id="mbbj" role="tabpanel">
                                 <div class="main-data">
                                   <div class="p-3">
-                                    <div class="ztree-warp">
+                                    <div class="ztree-warp" style="height:300px">
                                       ztree 保留空间
                                     </div>
-                                    <div class="form-group">
-                                      <label>Band名称</label>
-                                      <input class="form-control" placeholder="输入Band名称">
-                                      <small class="form-text text-muted">提示文字文字</small>
+                                    <div class="row mt-5">
+                                      <div class="form-group col-3">
+                                        <label>边框样式</label>
+                                        <select class="form-control form-control-sm"><option>空白</option></select>
+                                      </div>
+                                      <div class="form-group col-2">
+                                        <label>位置</label>
+                                        <select class="form-control form-control-sm"><option>上</option></select>
+                                      </div>
+                                      <div class="form-group col-3">
+                                        <label>出现频率</label>
+                                        <select class="form-control form-control-sm"><option>每页</option></select>
+                                      </div>
+                                      <div class="form-group col-2">
+                                        <label>高度</label>
+                                        <input class="form-control form-control-sm">
+                                      </div>
+                                      <div class="form-group col-2">
+                                        <label>宽度</label>
+                                        <input class="form-control form-control-sm">
+                                      </div>
                                     </div>
-                                    <div class="form-group">
-                                      <label>边框样式</label>
-                                      <select class="form-control"><option> </option></select>
+                                  </div>
+                                </div>
+                              </div>
+                              <!--指标映射-->
+                              <div class="tab-pane" id="zbys" role="tabpanel">
+                                <div class="main-data">
+                                  <div class="p-3">
+                                    <div class="row">
+                                      <div class="col-6">
+                                        <span>报表映射指标(勾选表示:主从关系的ID关联指标)</span>
+                                        <div class="ztree-warp" style="height:400px">
+                                          ztree 保留空间
+                                        </div>
+                                      </div>
+                                      <div class="col-6">
+                                        <span>可映射指标</span>
+                                        <div class="ztree-warp" style="height:400px">
+                                          ztree 保留空间
+                                        </div>
+                                      </div>
                                     </div>
-                                    <div class="form-group">
-                                      <label>高度</label>
-                                      <div class=" form-inline">
-                                        <input class="form-control mr-2" disabled>
+                                  </div>
+                                </div>
+                              </div>
+                              <!--指标摆放-->
+                              <div class="tab-pane" id="zbbf" role="tabpanel">
+                                <div class="main-data">
+                                  <div class="p-3">
+                                    <div class="row">
+                                      <div class="col-6">
+                                        <div class="ztree-warp" style="height:300px">
+                                          ztree 保留空间
+                                        </div>
+                                      </div>
+                                      <div class="col-6">
+                                        <div class="row">
+                                          <div class="col-12">
+                                            <div class="ztree-warp" style="height:110px">
+                                              ztree 保留空间
+                                            </div>
+                                          </div>
+                                          <div class="col-12 mt-4">
+                                            <div class="ztree-warp" style="height:160px">
+                                              ztree 保留空间
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div class="row mt-3">
+                                       <div class="form-group col-2">
+                                        <label>字体选择</label>
+                                        <input class="form-control form-control-sm" type="text">
+                                       </div>
+                                       <div class="form-group col-2">
+                                        <label>字体名称</label>
+                                        <input class="form-control form-control-sm" type="text">
+                                       </div>
+                                       <div class="form-group col-2">
+                                        <label>字体大小</label>
+                                        <input class="form-control form-control-sm" type="text">
+                                       </div>
+                                       <div class="form-group col-3">
+                                        <label>字体其他特性</label>
                                         <div class="form-check">
-                                         <label class="form-check-label">
-                                           <input class="form-check-input" type="checkbox" checked> 自动填充
-                                         </label>
+                                            <label class="form-check-label">
+                                                <input type="checkbox" class="form-check-input">
+                                                粗体
+                                            </label>
+                                            <label class="form-check-label">
+                                                <input type="checkbox" class="form-check-input">
+                                                斜体
+                                            </label>
+                                            <label class="form-check-label">
+                                                <input type="checkbox" class="form-check-input">
+                                                下划线
+                                            </label>
+                                        </div>
                                        </div>
-                                     </div>
                                     </div>
-                                    <div class="form-group">
-                                      <label>宽度</label>
-                                      <div class=" form-inline">
-                                        <input class="form-control mr-2" placeholder="">
-                                        <div class="form-check">
-                                         <label class="form-check-label">
-                                           <input class="form-check-input" type="checkbox"> 自动填充
-                                         </label>
+                                    <div class="row">
+                                       <div class="form-group col-2">
+                                        <label>边框样式</label>
+                                        <select class="form-control form-control-sm"><option>正常</option></select>
+                                       </div>
+                                       <div class="form-group col-2">
+                                        <label>左边</label>
+                                        <input class="form-control form-control-sm">
+                                       </div>
+                                       <div class="form-group col-2">
+                                        <label>右边</label>
+                                        <input class="form-control form-control-sm">
+                                       </div>
+                                       <div class="form-group col-2">
+                                        <label>上边</label>
+                                        <input class="form-control form-control-sm">
+                                       </div>
+                                       <div class="form-group col-2">
+                                        <label>下边</label>
+                                        <input class="form-control form-control-sm">
                                        </div>
                                      </div>
+                                    <div class="row">
+                                       <div class="form-group col-2">
+                                        <label>控制选择</label>
+                                        <select class="form-control form-control-sm"><option>正文内容</option></select>
+                                       </div>
+                                       <div class="form-group col-2">
+                                        <label>横向对齐</label>
+                                        <select class="form-control form-control-sm"><option>右</option></select>
+                                       </div>
+                                       <div class="form-group col-2">
+                                        <label>纵向对齐</label>
+                                        <select class="form-control form-control-sm"><option>下</option></select>
+                                       </div>
+                                       <div class="form-group col-3">
+                                        <label>控制其他特性</label>
+                                        <div class="form-check">
+                                            <label class="form-check-label">
+                                                <input class="form-check-input"  type="checkbox">
+                                                自动缩放
+                                            </label>
+                                            <label class="form-check-label">
+                                                <input class="form-check-input"  type="checkbox">
+                                                显示0
+                                            </label>
+                                            <label class="form-check-label">
+                                                <input class="form-check-input" type="checkbox">
+                                                自动折行
+                                            </label>
+                                        </div>
+                                       </div>
                                     </div>
-                                    <div class="form-group">
-                                      <label>出现频率</label>
-                                      <select class="form-control"><option>每页</option><option>首页</option><option>尾页</option><option>章首页</option><option>章尾页</option><option>分组</option><option>交叉行尾页</option><option>交叉列尾页</option></select>
-                                    </div>
-                                    <div class="form-group">
-                                      <label>位置</label>
-                                      <select class="form-control"><option>上</option><option>下</option><option>左</option><option>右</option><option>填充</option></select>
-                                    </div>
-                                    <div class="form-group">
-                                      <label>边框合并</label>
-                                      <div class="form-check">
-                                        <label class="form-check-label">
-                                          <input type="checkbox" class="form-check-input">
-                                          合并
-                                        </label>
-                                      </div>
+                                    <div class="row">
+                                       <div class="form-group col">
+                                        <label>左</label>
+                                        <div class="input-group input-group-sm">
+                                          <div class="input-group-addon">
+                                            <div class="form-check m-0">
+                                              <label class="form-check-label">
+                                                  <input class="form-check-input" type="checkbox">
+                                                  百分比
+                                              </label>
+                                            </div>
+                                          </div>
+                                          <input class="form-control" type="number">
+                                        </div>
+                                       </div>
+                                       <div class="form-group col">
+                                        <label>右</label>
+                                        <div class="input-group input-group-sm">
+                                          <div class="input-group-addon">
+                                            <div class="form-check m-0">
+                                              <label class="form-check-label">
+                                                  <input class="form-check-input" type="checkbox">
+                                                  百分比
+                                              </label>
+                                            </div>
+                                          </div>
+                                          <input class="form-control" type="number">
+                                        </div>
+                                       </div>
+                                       <div class="form-group col">
+                                        <label>上</label>
+                                        <div class="input-group input-group-sm">
+                                          <div class="input-group-addon">
+                                            <div class="form-check m-0">
+                                              <label class="form-check-label">
+                                                  <input class="form-check-input" type="checkbox">
+                                                  百分比
+                                              </label>
+                                            </div>
+                                          </div>
+                                          <input class="form-control" type="number">
+                                        </div>
+                                       </div>
+                                       <div class="form-group col">
+                                        <label>下</label>
+                                        <div class="input-group input-group-sm">
+                                          <div class="input-group-addon">
+                                            <div class="form-check m-0">
+                                              <label class="form-check-label">
+                                                  <input class="form-check-input" type="checkbox">
+                                                  百分比
+                                              </label>
+                                            </div>
+                                          </div>
+                                          <input class="form-control" type="number">
+                                        </div>
+                                       </div>
+                                       <div class="form-group col-2">
+                                        <label></label>
+                                        <div class="form-check">
+                                            <label class="form-check-label">
+                                                <input class="form-check-input" type="checkbox">
+                                                自动行高
+                                            </label>
+                                        </div>
+                                       </div>
                                     </div>
+                                    <div class="row">
+                                       <div class="form-group col-2">
+                                        <label>前缀</label>
+                                        <input class="form-control form-control-sm">
+                                       </div>
+                                       <div class="form-group col-2">
+                                        <label>后缀</label>
+                                        <input class="form-control form-control-sm">
+                                       </div>
+                                       <div class="form-group col-2">
+                                        <label>格式</label>
+                                        <input class="form-control form-control-sm">
+                                       </div>
+                                       <div class="form-group col-2">
+                                        <label>默认值</label>
+                                        <input class="form-control form-control-sm">
+                                       </div>
+                                     </div>
                                   </div>
                                 </div>
                               </div>
-                              <!--指标映射-->
-                              <div class="tab-pane" id="zbys" role="tabpanel">
+                              <!--数据预处理-->
+                              <div class="tab-pane" id="sjcl" role="tabpanel">
                                 <div class="main-data">
                                   <div class="p-3">
-                                    <div class="ztree-warp">
-                                      ztree 保留空间
-                                    </div>
                                     <div class="row">
-                                      <div class="form-group col-md-6">
-                                        <label class="col-form-label">名称</label>
-                                        <input class="form-control">
+                                      <div class="col-12">
+                                        <a class="btn btn-secondary btn-sm mb-1"><i class=" fa fa-plus-square"></i> 预处理环节</a>
                                       </div>
-                                      <div class="form-group col-md-6">
-                                        <label for="inputPassword4" class="col-form-label">数据类型</label>
-                                        <select class="form-control"><option>String</option><option>Number</option><option>Date</option><option>Img etc</option></select>
+                                      <div class="col-6">
+                                        <div class="ztree-warp" style="height:180px">
+                                          ztree 保留空间
+                                        </div>
+                                      </div>
+                                      <div class="col-6">
+                                        <div class="ztree-warp" style="height:180px">
+                                          ztree 保留空间
+                                        </div>
                                       </div>
                                     </div>
-                                    <div class="form-group">
-                                      <label>映射指标</label>
-                                      <div class="input-group">
-                                        <div class="input-group-addon">类型</div>
-                                        <select class="form-control input-sm"><option>离散</option><option>主数据</option><option>从数据</option></select>
+                                    <div class="row mt-3">
+                                      <div class="input-group input-group-sm col-4">
+                                        <div class="input-group-addon">预处理数据对象</div>
+                                        <select class="form-control input-sm" id="select_mapping_data" onchange="preHandleObj.onChangeDataMappingObj(this, 'top')">
+                                        <option value="bills">清单</option><option value="ration">定额</option><option value="ration_glj">定额人材机</option><option value="projectGLJ">项目人材机</option></select>
+                                      </div>
+                                      <div class="input-group input-group-sm col-4">
+                                          <div class="input-group-addon">排序方式</div>
+                                          <select class="form-control input-sm" id="select_sort_types" onchange="preHandleSortObj.onSortTypeChange(this)">
+                                              <option value="normal">普通</option>
+                                              <option value="tree">树结构</option>
+                                              <option value="accord_to_parent">依据上级</option>
+                                              <option value="self_define">自定义排序</option>
+                                          </select>
                                       </div>
                                     </div>
-                                    <div class="form-group">
-                                      <select class="form-control" size="5"></select>
+                                    <div class="row mt-3">
+                                      <div class="col-6">
+                                        <span clas="mb-1">清单顶节点(全空白表示全部)</span>
+                                        <div class="ztree-warp" style="height:180px">
+                                          ztree 保留空间
+                                        </div>
+                                      </div>
+                                      <div class="col-6">
+                                        <span clas="mb-1">清单其他节点(全空白表示全部)</span>
+                                        <div class="ztree-warp" style="height:180px">
+                                          ztree 保留空间
+                                        </div>
+                                      </div>
                                     </div>
                                   </div>
                                 </div>
                               </div>
-                              <!--指标摆放-->
-                              <div class="tab-pane" id="zbbf" role="tabpanel">
+                              <!--计算式-->
+                              <div class="tab-pane" id="jss" role="tabpanel">
                                 <div class="main-data">
                                   <div class="p-3">
-                                    <div class="ztree-warp">
-                                      ztree 保留空间
-                                    </div>
-                                    <div class="form-group">
-                                      <label>所属Band</label>
-                                      <select class="form-control"><option> </option></select>
-                                    </div>
-                                    <div class="form-group">
-                                      <label>显示行高度</label>
-                                      <select class="form-control"><option> </option></select>
-                                      <small class="form-text text-muted">用于 流水行/交叉行</small>
-                                    </div>
-                                    <div class="form-group">
-                                      <label>显示列宽度</label>
-                                      <select class="form-control"><option> </option></select>
-                                      <small class="form-text text-muted">用于 交叉列</small>
+                                    <div class="row">
+                                      <div class="col-12">
+                                        <span class="mb-1">计算式</span>
+                                        <div class="ztree-warp" style="height:140px">
+                                          ztree 保留空间
+                                        </div>
+                                      </div>
                                     </div>
-                                    <div class="ztree-warp">
-                                      ztree 保留空间
+                                    <div class="row mt-3">
+                                      <div class="col-4">
+                                        <div class="input-group input-group-sm">
+                                          <select class="form-control"><option>转换大小写金额</option></select>
+                                          <span class="input-group-btn">
+                                            <button class="btn btn-primary" type="button">套用</button>
+                                          </span>
+                                        </div>
+                                      </div>
                                     </div>
-                                    <div class="form-group">
-                                      <label>映射指标</label>
-                                      <select class="form-control"><option> </option></select>
+                                    <div class="row mt-3">
+                                      <div class="form-group col-3">
+                                        <label>计算式执行点</label>
+                                        <select class="form-control form-control-sm"><option>预运行</option></select>
+                                      </div>
+                                      <div class="form-group col-3">
+                                        <label>格式串(format)</label>
+                                        <input class="form-control form-control-sm">
+                                      </div>
+                                      <div class="form-group col-12">
+                                        <textarea class="form-control" rows="8"></textarea>
+                                      </div>
                                     </div>
                                   </div>
                                 </div>
                               </div>
-                              <!--计算式-->
-                              <div class="tab-pane" id="jss" role="tabpanel">
+                              <!--模板JS对象-->
+                              <div class="tab-pane" id="mbdx" role="tabpanel">
                                 <div class="main-data">
                                   <div class="p-3">
-                                  计算式
+                                    <div class="mb-3">
+                                      <a href="#" class="btn btn-sm btn-primary">生成JS文本</a>
+                                      <a href="#" class="btn btn-sm btn-primary">导入JS文本</a>
+                                    </div>
+                                    <div class="form-group">
+                                      <textarea class="form-control" rows="21"></textarea>
+                                    </div>
                                   </div>
                                 </div>
                               </div>
                           </div>
                         </div>
-                        <!-- 报表预览 -->
-                        <div class="form-view col-lg-6 p-0">
-                          <div class="main-data-h" style="position:relative">
-                             <div class="p-3">
-                                第三栏
-                             </div>
-                          </div>
-                        </div>
                       </div>
                     </div>
                   </div>
@@ -406,7 +602,7 @@
   		var zNodes =[
   			{ id:1, pId:0, name:"父节点1 - 展开", open:true},
   			{ id:11, pId:1, name:"父节点11 - 折叠"},
-  			{ id:111, pId:11, name:"叶子节点111"},
+  			{ id:111, pId:11, name:"叶子节点111叶子节点111叶子节点111叶子节点111叶子节点111叶子节点111"},
   			{ id:112, pId:11, name:"叶子节点112"},
   			{ id:113, pId:11, name:"叶子节点113"},
   			{ id:114, pId:11, name:"叶子节点114"},