| | |
|---|
| | | #locMapContain { |
|---|
| | | overflow-x: auto; |
|---|
| | | width:100%; |
|---|
| | | height:700px |
|---|
| | | height:700px; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | .a-loc { |
|---|
| | | cursor: pointer; |
|---|
| | |
|---|
| | | .layui-table td:hover { |
|---|
| | | opacity: 0.5; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | .loc-selected { |
|---|
| | | border: 2px solid red !important; |
|---|
| | | box-shadow: 0 0 5px red; |
|---|
| | | } |
|---|
| | | #selectionBox { |
|---|
| | | position: absolute; |
|---|
| | | border: 1px dashed #009688; |
|---|
| | | background-color: rgba(0, 150, 136, 0.2); |
|---|
| | | display: none; |
|---|
| | | z-index: 1000; |
|---|
| | | pointer-events: none; |
|---|
| | | } |
|---|
| | | .area-legend-item { |
|---|
| | | display: inline-flex; |
|---|
| | | align-items: center; |
|---|
| | | margin-right: 15px; |
|---|
| | | font-size: 14px; |
|---|
| | | cursor: pointer; |
|---|
| | | padding: 2px 5px; |
|---|
| | | border-radius: 4px; |
|---|
| | | transition: background-color 0.2s; |
|---|
| | | } |
|---|
| | | .area-legend-item:hover { |
|---|
| | | background-color: #f0f0f0; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <!-- 搜索栏 --> |
|---|
| | | <div id="search-box" class="layui-form layui-card-header"> |
|---|
| | | <div class="layui-inline" style="margin-left: 10px"> |
|---|
| | | <div class="layui-input-inline"> |
|---|
| | | <select name="row" lay-filter="row"> |
|---|
| | | <option value="1">第1排</option> |
|---|
| | | <option value="2">第2排</option> |
|---|
| | | <option value="3">第3排</option> |
|---|
| | | <option value="4">第4排</option> |
|---|
| | | <option value="5">第5排</option> |
|---|
| | | <option value="6">第6排</option> |
|---|
| | | <option value="7">第7排</option> |
|---|
| | | <option value="8">第8排</option> |
|---|
| | | <label class="layui-form-label" style="width: auto; min-width: 80px;" data-i18n="display_mode">显示模式</label> |
|---|
| | | <div class="layui-input-inline" style="width: 150px;"> |
|---|
| | | <select id="viewMode" name="viewMode" lay-filter="viewMode"> |
|---|
| | | <option value="byRow" data-i18n="view_by_row">按排显示</option> |
|---|
| | | <option value="byLayer" data-i18n="view_by_layer">按层显示</option> |
|---|
| | | </select> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 按排时的下拉框（默认显示） --> |
|---|
| | | <div class="layui-inline" id="rowSelectBox" style="margin-left: 20px;"> |
|---|
| | | <div class="layui-input-inline"> |
|---|
| | | <select id="rowSelect" name="row" lay-filter="row"> |
|---|
| | | <!-- 选项由js动态生成 --> |
|---|
| | | </select> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 按层时的下拉框（初始隐藏） --> |
|---|
| | | <div class="layui-inline" id="layerSelectBox" style="margin-left: 20px; display:none;"> |
|---|
| | | <div class="layui-input-inline"> |
|---|
| | | <select id="layerSelect" name="layer" lay-filter="layer"> |
|---|
| | | <!-- 选项由js动态生成 --> |
|---|
| | | </select> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="layui-inline" style="margin-left: 20px;"> |
|---|
| | | <button class="layui-btn layui-btn-normal" id="btnSelectMode" data-i18n="enable_selection">开启框选</button> |
|---|
| | | <button class="layui-btn" id="btnAssignZone" style="display:none; margin-left:10px;" data-i18n="assign_zone">分配库区</button> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div id="areaLegend" style="padding: 5px 15px; background: #fff; border-bottom: 1px solid #eee; display:none;"> |
|---|
| | | <!-- Legend items will be injected here --> |
|---|
| | | </div> |
|---|
| | | <div id="locMapContain"> |
|---|
| | | <table class="layui-table" id="locMap" lay-filter="locMap"></table> |
|---|
| | | <div id="selectionBox"></div> |
|---|
| | | </div> |
|---|
| | | <!-- 表格 --> |
|---|
| | | |
|---|
| | |
|---|
| | | {{#each body}} |
|---|
| | | <tr> |
|---|
| | | {{#each loc}} |
|---|
| | | <td class="a-loc" title="{{locNo}}" onclick="locDetl(this)" style="background-color:{{bgc}};color:{{color}}">{{locType}}</td> |
|---|
| | | <td class="a-loc" title="{{locNo}}" onclick="locDetl(this)" |
|---|
| | | style="background-color:{{bgc}};color:{{color}};position:relative;{{#if locType2}}box-shadow:inset 0 0 0 4px {{getAreaColor locType2}}{{/if}}"> |
|---|
| | | {{locSts}} |
|---|
| | | {{#if locType2}}<div style="position:absolute;top:0;right:0;width:0;height:0;border-top:10px solid {{getAreaColor locType2}};border-left:10px solid transparent;"></div>{{/if}} |
|---|
| | | </td> |
|---|
| | | {{/each}} |
|---|
| | | </tr> |
|---|
| | | {{/each}} |
|---|
| | |
|---|
| | | <script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script> |
|---|
| | | <script type="text/javascript" src="../../static/js/cool.js" charset="utf-8"></script> |
|---|
| | | <script type="text/javascript" src="../../static/js/handlebars/handlebars-v4.5.3.js"></script> |
|---|
| | | <script type="text/javascript" src="../../static/js/i18n/i18n-helper.js"></script> |
|---|
| | | <script type="text/javascript" src="../../static/js/report/locMap.js" charset="utf-8"></script> |
|---|
| | | </body> |
|---|
| | | <script type="text/template" id="locMastRowTemplate"> |
|---|
| | | {{#each data}} |
|---|
| | | <option value="{{this}}">{{this}}</option> |
|---|
| | | {{/each}} |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | </html> |
|---|
| | | |
|---|
