336 lines
18 KiB
JavaScript
336 lines
18 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" style="flex: unset;">名称</span>
|
|
<input class="input" type="text" @model="labelText">
|
|
</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">
|
|
<p class="lable-left-line">WGS84坐标</p>
|
|
</div>
|
|
<div class="row" style="margin-bottom: 5px;">
|
|
<div class="col">
|
|
<span class="label">经度</span>
|
|
<input class="input" type="number" title="" min="-180" max="180" @model="lng">
|
|
</div>
|
|
</div>
|
|
<div class="row" style="margin-bottom: 5px;">
|
|
<div class="col">
|
|
<span class="label">纬度</span>
|
|
<input class="input" type="number" title="" min="-90" max="90" @model="lat">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<span class="label">海拔高度</span>
|
|
<div class="input-number input-number-unit-1 alt-box">
|
|
<input class="input" type="number" title="" min="-9999999" max="999999999" @model="alt">
|
|
<span class="unit">m</span>
|
|
<span class="arrow"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 50%;">
|
|
<div class="row coordinate-select-box">
|
|
<div class="lable-left-line">转换坐标选择
|
|
<div class="input input-select coordinate-select" style="margin-left: 20px;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="margin-bottom: 5px;">
|
|
<div class="col">
|
|
<span class="label">X轴:</span>
|
|
<input style="border: none;background: none;" class="input convert-x" readonly="readonly">
|
|
</div>
|
|
</div>
|
|
<div class="row" style="margin-bottom: 5px;">
|
|
<div class="col">
|
|
<span class="label">Y轴:</span>
|
|
<input style="border: none;background: none;" class="input convert-y" readonly="readonly">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<span class="label">Z轴:</span>
|
|
<input style="border: none;background: none;" class="input convert-z" readonly="readonly">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="custom-divider"></span>
|
|
<div class="div-item">
|
|
<div class="row">
|
|
<div class="col" style="flex: 0 0 120px;">
|
|
<span class="label">视野缩放</span>
|
|
<input class="btn-switch" type="checkbox" @model="scaleByDistance">
|
|
</div>
|
|
<div class="col">
|
|
<span class="label">最近距离</span>
|
|
<div class="input-number input-number-unit-1">
|
|
<input class="input" type="number" title="" min="1" max="99999999" @model="near">
|
|
<span class="unit">m</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="1" max="99999999" @model="far">
|
|
<span class="unit">m</span>
|
|
<span class="arrow"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<DIV-cy-tabs id="point-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 height-box">
|
|
<span class="label" style="flex: 0 0 56px;">高度</span>
|
|
<div class="input-number input-number-unit-1">
|
|
<input class="input height" type="number" title="" min="-9999999" max="999999999">
|
|
<span class="unit">m</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">
|
|
<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">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div style="flex: 1;">
|
|
<div class="proj-input-box">
|
|
<div class="row">
|
|
<div class="col">
|
|
<span style="flex: 0 0 40px;">经度</span>
|
|
<input class="input lng" readonly="readonly">
|
|
</div>
|
|
<div class="col">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<span style="flex: 0 0 40px;">纬度</span>
|
|
<input class="input lat" readonly="readonly">
|
|
</div>
|
|
<div class="col">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="proj-input-box" style="width: 56%;">
|
|
<div class="row">
|
|
<div class="col" style="flex-direction: column;">
|
|
<div class="row" style="margin-bottom: 15px;">
|
|
<span style="flex: 0 0 40px;">经度</span>
|
|
<input class="input lng-dm-d" style="flex: 1;" readonly="readonly">
|
|
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">度</span>
|
|
<input class="input lng-dm-m" style="flex: 1;" readonly="readonly">
|
|
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">分</span>
|
|
<span class="top-line"></span>
|
|
</div>
|
|
<div class="row">
|
|
<span style="flex: 0 0 40px;">纬度</span>
|
|
<input class="input lat-dm-d" style="flex: 1;" readonly="readonly">
|
|
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">度</span>
|
|
<input class="input lat-dm-m" style="flex: 1;" readonly="readonly">
|
|
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">分</span>
|
|
<span class="bottom-line"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="proj-input-box" style="width: 70%;">
|
|
<div class="row">
|
|
<div class="col" style="flex-direction: column;">
|
|
<div class="row" style="margin-bottom: 15px;">
|
|
<span style="flex: 0 0 40px;">经度</span>
|
|
<input class="input lng-dms-d" style="flex: 1;" readonly="readonly">
|
|
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">度</span>
|
|
<input class="input lng-dms-m" style="flex: 1;" readonly="readonly">
|
|
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">分</span>
|
|
<input class="input lng-dms-s" style="flex: 1;" readonly="readonly">
|
|
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">秒</span>
|
|
<span class="top-line"></span>
|
|
</div>
|
|
<div class="row">
|
|
<span style="flex: 0 0 40px;">纬度</span>
|
|
<input class="input lat-dms-d" style="flex: 1;" readonly="readonly">
|
|
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">度</span>
|
|
<input class="input lat-dms-m" style="flex: 1;" readonly="readonly">
|
|
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">分</span>
|
|
<input class="input lat-dms-s" style="flex: 1;" readonly="readonly">
|
|
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">秒</span>
|
|
<span class="bottom-line"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DIV-cy-tab-pane>
|
|
<DIV-cy-tab-pane label="标注风格">
|
|
<div>
|
|
<h4>图标设置</h4>
|
|
<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-tab-pane label="效果">
|
|
<div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<span class="label">扩散</span>
|
|
<input class="btn-switch" type="checkbox" @model="diffuseShow">
|
|
</div>
|
|
<div class="col">
|
|
<span class="label">半径</span>
|
|
<input class="input" type="number" title="" min="0" max="9999999" @model="diffuseRadius">
|
|
</div>
|
|
<div class="col">
|
|
<span class="label">时间</span>
|
|
<input class="input" type="number" title="" min="100" max="99999" @model="diffuseDuration">
|
|
</div>
|
|
<div class="col">
|
|
<span class="label">颜色</span>
|
|
<div class="diffuseColor"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<span class="label">雷达</span>
|
|
<input class="btn-switch" type="checkbox" @model="scanShow">
|
|
</div>
|
|
<div class="col">
|
|
<span class="label">半径</span>
|
|
<input class="input" type="number" title="" min="0" max="9999999" @model="scanRadius">
|
|
</div>
|
|
<div class="col">
|
|
<span class="label">时间</span>
|
|
<input class="input" type="number" title="" min="100" max="99999" @model="scanDuration">
|
|
</div>
|
|
<div class="col">
|
|
<span class="label">颜色</span>
|
|
<div class="scanColor"></div>
|
|
</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="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>
|
|
<span class="custom-divider"></span>
|
|
`
|
|
}
|
|
|
|
export { html }
|