230 lines
11 KiB
JavaScript
230 lines
11 KiB
JavaScript
import { attributeElm } from '../../Element/elm_html'
|
|
|
|
function html(that) {
|
|
return `
|
|
<span class="custom-divider"></span>
|
|
<div class="div-item">
|
|
<div class="row">
|
|
<div class="col">
|
|
<span class="label">颜色</span>
|
|
<div class="color"></div>
|
|
</div>
|
|
<div class="col">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="custom-divider"></span>
|
|
<div class="div-item">
|
|
<div class="row">
|
|
<div style="width: 46%;">
|
|
<div class="row add-type-box">
|
|
<div class="lable-left-line">添加方式
|
|
<div class="input input-select add-type" style="margin-left: 20px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 50%;">
|
|
<div class="row" style="margin-bottom: 5px;">
|
|
<div class="col">
|
|
<span class="label">朝向偏移</span>
|
|
<div class="input-number input-number-unit-1">
|
|
<input class="input" type="number" title="" min="0" max="360" @model="deviation">
|
|
<span class="unit">°</span>
|
|
<span class="arrow"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h4>模型间隔</h4>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;">
|
|
<input type="checkbox" class="YJ-custom-checkbox">
|
|
<span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">自定义距离</span>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;">
|
|
<input type="checkbox" class="YJ-custom-checkbox">
|
|
<span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">固定距离</span>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="label">模型间隔</span>
|
|
<div class="input-number input-number-unit-1">
|
|
<input class="input" type="number" title="" min="0" max="360" @model="spacing">
|
|
<span class="unit">米</span>
|
|
<span class="arrow"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h4>线型选择</h4>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;">
|
|
<input type="checkbox" class="YJ-custom-checkbox">
|
|
<span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">折线</span>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;">
|
|
<input type="checkbox" class="YJ-custom-checkbox">
|
|
<span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">曲线</span>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="label">线条数量</span>
|
|
<div class="input-number input-number-unit-1">
|
|
<input class="input" type="number" title="" min="0" max="360" @model="lineNum">
|
|
<span class="unit">条</span>
|
|
<span class="arrow"></span>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="label">线条间隔</span>
|
|
<div class="input-number input-number-unit-1">
|
|
<input class="input" type="number" title="" min="0" max="360" @model="lineSpacing">
|
|
<span class="unit">米</span>
|
|
<span class="arrow"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;">
|
|
<input type="checkbox" class="YJ-custom-checkbox">
|
|
<span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">随机采样</span>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="label">随机数量</span>
|
|
<div class="input-number input-number-unit-1">
|
|
<input class="input" type="number" title="" min="0" max="360" @model="lineNum">
|
|
<span class="unit">个</span>
|
|
<span class="arrow"></span>
|
|
</div>
|
|
</div>
|
|
<div class="col"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;">
|
|
<input type="checkbox" class="YJ-custom-checkbox">
|
|
<span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">网格采样</span>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="label">首边间隔</span>
|
|
<div class="input-number input-number-unit-1">
|
|
<input class="input" type="number" title="" min="0" max="360" @model="fistLineSpacing">
|
|
<span class="unit">米</span>
|
|
<span class="arrow"></span>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="label">次边间隔</span>
|
|
<div class="input-number input-number-unit-1">
|
|
<input class="input" type="number" title="" min="0" max="360" @model="secondLineSpacing">
|
|
<span class="unit">米</span>
|
|
<span class="arrow"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="custom-divider"></span>
|
|
<div class="row">
|
|
<DIV-cy-tabs id="point-object-edit-tabs">
|
|
<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>
|
|
<div class="row">
|
|
<div style="width: 46%;">
|
|
<div class="row add-type-box">
|
|
<div class="lable-left-line">缩放
|
|
<div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;">
|
|
<input type="checkbox" class="YJ-custom-checkbox">
|
|
<span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">是否等比例缩放</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DIV-cy-tab-pane>
|
|
<DIV-cy-tab-pane label="标注风格">
|
|
<div>
|
|
<div class="row" style="margin-bottom: 10px;">
|
|
<div class="col">
|
|
<span class="label">新增模型风格设置</span>
|
|
<button @click="openRichTextEditor">初始风格</button>
|
|
</div>
|
|
<div class="col">
|
|
<button @click="openRichTextEditor">当前风格</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" style="margin-bottom: 10px;">
|
|
<div class="col" style="flex: 0 0 80px;">
|
|
<span class="label" style="flex: none;">显隐</span>
|
|
<input class="btn-switch" type="checkbox" @model="billboardShow">
|
|
</div>
|
|
<div class="col" style="flex: 0 0 90px;">
|
|
<span class="label" style="flex: none;">图标</span>
|
|
<div class="image-box" @click="clickChangeImage">
|
|
<img class="image" src="" alt="" @model="billboardImage">
|
|
</div>
|
|
</div>
|
|
<div class="col" style="flex: 0 0 90px;">
|
|
<span class="label" style="flex: none;">默认图标</span>
|
|
<div class="image-box" @click="clickChangeDefaultImage">
|
|
<img class="image" src="" alt="" @model="billboardDefaultImage">
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="label">图标倍数</span>
|
|
<div class="input-number input-number-unit-2">
|
|
<input class="input" type="number" title="" min="0.1" max="99" @model="billboardScale">
|
|
<span class="unit">倍</span>
|
|
<span class="arrow"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4>文字设置</h4>
|
|
<div class="row">
|
|
<div class="col" style="flex: 0 0 80px;">
|
|
<span class="label" style="flex: none;">显隐</span>
|
|
<input class="btn-switch" type="checkbox" @model="labelShow">
|
|
</div>
|
|
<div class="col font-select-box">
|
|
<span class="label" style="flex: none;">字体选择</span>
|
|
<div class="input input-select font-select"></div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="label">文字大小</span>
|
|
<div class="input-number input-number-unit-2">
|
|
<input class="input" type="number" title="" min="1" max="99" @model="labelFontSize" style="width: 70px;">
|
|
<span class="unit">px</span>
|
|
<span class="arrow"></span>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="label">文字颜色</span>
|
|
<div class="labelColor"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DIV-cy-tab-pane>
|
|
</DIV-cy-tabs>
|
|
</div>
|
|
<span class="custom-divider"></span>
|
|
`
|
|
}
|
|
|
|
export { html }
|