Files
sdk4.0_new/src/Obj/Base/PolylineObject/_element.js

169 lines
8.6 KiB
JavaScript
Raw Normal View History

2025-09-01 16:17:11 +08:00
import { attributeElm, labelStyleElm1, labelStyleElm2 } from '../../Element/elm_html'
function html(that) {
return `
<span class="custom-divider"></span>
<div class="div-item">
<div class="row" style="align-items: flex-start;">
<div class="col">
<span class="label">名称</span>
<input class="input" maxlength="40" type="text" @model="name">
</div>
<div class="col" style="flex: 0 0 56%;">
<div>
<div class="row">
<div class="col input-select-unit-box">
<div class="input-select-unit"></div>
<input class="input input-text" readonly="readonly" type="text" style="flex: 0 0 130px;" @model="length">
<div class="input-select-unit"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="div-item">
<div class="row">
<DIV-cy-tabs id="polyline-object-edit-tabs">
<DIV-cy-tab-pane label="属性信息">
${attributeElm(that)}
</DIV-cy-tab-pane>
<DIV-cy-tab-pane label="空间信息">
<div class="row">
<div class="col height-mode-box">
<span class="label" style="flex: 0 0 56px;">高度模式</span>
<div class="height-mode"></div>
</div>
<div class="col">
<span class="label">Z值统一增加</span>
<div class="input-number input-number-unit-1 height-box">
<input class="input height" type="number" title="" min="-9999999" max="999999999">
<span class="unit">m</span>
<span class="arrow"></span>
</div>
<button class="confirm height-confirm" style="margin-left: 5px;">应用</button>
</div>
</div>
<div class="row">
<div class="table spatial-info-table">
<div class="table-head">
<div class="tr">
<div class="th"></div>
<div class="th">经度X</div>
<div class="th">纬度Y</div>
<div class="th">高度Z</div>
</div>
</div>
<div class="table-body">
</div>
</div>
</div>
</DIV-cy-tab-pane>
<DIV-cy-tab-pane label="线条风格">
<div class="row">
<div class="col">
<span class="label">线条颜色</span>
<div class="color"></div>
</div>
<div class="col" style="flex: 0 0 33%;">
<span class="label">线条宽度</span>
<div class="input-number input-number-unit-1" style="width: 80px;">
<input class="input" type="number" title="" min="1" max="999" @model="lineWidth">
<span class="unit">px</span>
<span class="arrow"></span>
</div>
</div>
<div class="col input-select-line-type-box" style="flex: 0 0 37%;">
<span class="label">线条形式</span>
<div class="input-select-line-type"></div>
</div>
</div>
<div class="row">
<div class="col">
<span class="label">首尾相连</span>
<input class="btn-switch" type="checkbox" @model="noseToTail">
</div>
<div class="col" style="flex: 0 0 33%;">
<span class="label">线段圆滑</span>
<input class="btn-switch" type="checkbox" @model="smooth">
</div>
<div class="col" style="flex: 0 0 37%;">
</div>
</div>
<div class="row">
<div class="col">
<span class="label">线段缓冲</span>
<input class="btn-switch" type="checkbox" @model="extend">
</div>
<div class="col" style="flex: 0 0 33%;">
<span class="label">缓冲宽度</span>
<div class="input-number input-number-unit-1" style="width: 80px;">
<input class="input" type="number" title="" min="0" data-min="0.01" max="999999" @model="extendWidth">
<span class="unit">m</span>
<span class="arrow"></span>
</div>
</div>
<div class="col" style="flex: 0 0 37%;">
<span class="label">缓冲颜色</span>
<div class="extendColor"></div>
</div>
</div>
<div class="row" id="dashTextureDom">
<div class="col">
<span class="label">首尾反向</span>
<input class="btn-switch" type="checkbox" @model="rotate">
</div>
<div class="col" style="flex: 0 0 33%;">
<span class="label">流动速率</span>
<div class="input-number input-number-unit-1" style="width: 80px;">
<input class="input" type="number" title="" min="0" max="999999" step="1" @model="speed">
<span class="arrow"></span>
</div>
</div>
<div class="col" style="flex: 0 0 37%;">
<span class="label lineSpace">线条间距</span>
<div class="input-number input-number-unit-1 lineSpace" style="width: 80px;">
<input class="input" type="number" title="" min="0" max="4.5" step="0.1" @model="space">
<span class="unit"></span>
<span class="arrow"></span>
</div>
</div>
</div>
</DIV-cy-tab-pane>
<DIV-cy-tab-pane label="标注风格">
${labelStyleElm1()}
</DIV-cy-tab-pane>
<DIV-cy-tab-pane label="标签风格">
${labelStyleElm2()}
</DIV-cy-tab-pane>
<!-- <DIV-cy-tab-pane label="灯光控制">-->
<!-- <div>-->
<!-- <div class="row">-->
<!-- <div class="col">-->
<!-- <span class="label">指令</span>-->
<!-- <input class="input" type="text" @model="instruct">-->
<!-- <button class="primary" @click="instructSubmit">提交</button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </DIV-cy-tab-pane>-->
<!-- <DIV-cy-tab-pane label="设置操作点">-->
<!-- <div>-->
<!-- <div class="row">-->
<!-- <div class="col">-->
<!-- <span class="label">设置操作点</span>-->
<!-- <input class="input" type="text" @model="operatingPoint">-->
<!-- <button class="primary" @click="operatingPointSubmit">提交</button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </DIV-cy-tab-pane>-->
</DIV-cy-tabs>
</div>
</div>
<span class="custom-divider"></span>
`
}
export { html }