zh/sdk4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

线样式修改

Browse Source
This commit is contained in:
夏大胆
2025-07-10 15:14:01 +08:00
parent 45f2d6f4eb
commit 11812253e6
5 changed files with 380 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/Obj/Base/PolylineObject/_element.js
View File

@ -9,22 +9,15 @@ function html(that) {
<span class="label">名称</span> <span class="label">名称</span>
<input class="input" maxlength="40" type="text" @model="name"> <input class="input" maxlength="40" type="text" @model="name">
</div> </div>
<div class="col" style="flex: 0 0 54%;"> <div class="col" style="flex: 0 0 56%;">
<div> <div>
<div class="row"> <div class="row">
<div class="col input-select-unit-box"> <div class="col input-select-unit-box">
<span class="label">原始长度:</span> <div class="input-select-unit"></div>
<input class="input input-text" readonly="readonly" type="text" style="flex: 0 0 130px;" @model="length"> <input class="input input-text" readonly="readonly" type="text" style="flex: 0 0 130px;" @model="length">
<div class="input-select-unit"></div> <div class="input-select-unit"></div>
</div> </div>
</div> </div>
<div class="row">
<div class="col input-select-fit-unit-box">
<span class="label">拟合长度:</span>
<input class="input input-text" readonly="readonly" type="text" style="flex: 0 0 130px;" @model="fitLength">
<div class="input-select-fit-unit"></div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -48,7 +41,7 @@ function html(that) {
<span class="unit">m</span> <span class="unit">m</span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
<button class="confirm height-confirm" style="margin-left: 5px;">确认</button> <button class="confirm height-confirm" style="margin-left: 5px;">应用</button>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -72,7 +65,7 @@ function html(that) {
<span class="label">线条颜色</span> <span class="label">线条颜色</span>
<div class="color"></div> <div class="color"></div>
</div> </div>
<div class="col"> <div class="col" style="flex: 0 0 33%;">
<span class="label">线条宽度</span> <span class="label">线条宽度</span>
<div class="input-number input-number-unit-1" style="width: 80px;"> <div class="input-number input-number-unit-1" style="width: 80px;">
<input class="input" type="number" title="" min="1" max="999" @model="lineWidth"> <input class="input" type="number" title="" min="1" max="999" @model="lineWidth">
@ -80,7 +73,7 @@ function html(that) {
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
</div> </div>
<div class="col input-select-line-type-box"> <div class="col input-select-line-type-box" style="flex: 0 0 37%;">
<span class="label">线条形式</span> <span class="label">线条形式</span>
<div class="input-select-line-type"></div> <div class="input-select-line-type"></div>
</div> </div>
@ -90,11 +83,11 @@ function html(that) {
<span class="label">首尾相连</span> <span class="label">首尾相连</span>
<input class="btn-switch" type="checkbox" @model="noseToTail"> <input class="btn-switch" type="checkbox" @model="noseToTail">
</div> </div>
<div class="col"> <div class="col" style="flex: 0 0 33%;">
<span class="label">线段圆滑</span> <span class="label">线段圆滑</span>
<input class="btn-switch" type="checkbox" @model="smooth"> <input class="btn-switch" type="checkbox" @model="smooth">
</div> </div>
<div class="col"> <div class="col" style="flex: 0 0 37%;">
</div> </div>
</div> </div>
<div class="row" id="dashTextureDom"> <div class="row" id="dashTextureDom">
@ -102,7 +95,7 @@ function html(that) {
<span class="label">动画顺向</span> <span class="label">动画顺向</span>
<input class="btn-switch" type="checkbox" @model="rotate"> <input class="btn-switch" type="checkbox" @model="rotate">
</div> </div>
<div class="col"> <div class="col" style="flex: 0 0 33%;">
<span class="label">动画时长</span> <span class="label">动画时长</span>
<div class="input-number input-number-unit-1" style="width: 80px;"> <div class="input-number input-number-unit-1" style="width: 80px;">
<input class="input" type="number" title="" min="0" max="999999" step="0.1" @model="speed"> <input class="input" type="number" title="" min="0" max="999999" step="0.1" @model="speed">
@ -110,10 +103,11 @@ function html(that) {
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
</div> </div>
<div class="col" > <div class="col" style="flex: 0 0 37%;">
<span class="label lineSpace">间距</span> <span class="label lineSpace">间距</span>
<div class="input-number input-number-unit-1 lineSpace" style="width: 80px;"> <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"> <input class="input" type="number" title="" min="0" max="4.5" step="0.1" @model="space">
<span class="unit">倍</span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
</div> </div>
@ -123,7 +117,7 @@ function html(that) {
<span class="label">线段缓冲</span> <span class="label">线段缓冲</span>
<input class="btn-switch" type="checkbox" @model="extend"> <input class="btn-switch" type="checkbox" @model="extend">
</div> </div>
<div class="col"> <div class="col" style="flex: 0 0 33%;">
<span class="label">缓冲宽度</span> <span class="label">缓冲宽度</span>
<div class="input-number input-number-unit-1" style="width: 80px;"> <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"> <input class="input" type="number" title="" min="0" data-min="0.01" max="999999" @model="extendWidth">
@ -131,7 +125,7 @@ function html(that) {
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
</div> </div>
<div class="col"> <div class="col" style="flex: 0 0 37%;">
<span class="label">缓冲颜色</span> <span class="label">缓冲颜色</span>
<div class="extendColor"></div> <div class="extendColor"></div>
</div> </div>

325
src/Obj/Base/PolylineObject/index.js
View File

@ -63,6 +63,7 @@ class PolylineObject extends Base {
this.options.dashSize = options.dashSize || 0.03 this.options.dashSize = options.dashSize || 0.03
this.options['length-unit'] = options['length-unit'] || '米' this.options['length-unit'] = options['length-unit'] || '米'
this.options['fit-length-unit'] = options['fit-length-unit'] || '米' this.options['fit-length-unit'] = options['fit-length-unit'] || '米'
this.options['words-name'] = options['words-name'] || '空间长度'
this.options['extend-width'] = this.options['extend-width'] =
options['extend-width'] || options['extend-width'] === 0 options['extend-width'] || options['extend-width'] === 0
? options['extend-width'] ? options['extend-width']
@ -120,6 +121,7 @@ class PolylineObject extends Base {
this.options.attributeType = options.attributeType || 'richText' this.options.attributeType = options.attributeType || 'richText'
this.operate = {} this.operate = {}
this.nodePoints = [] this.nodePoints = []
this.unitNum = 0
this.Dialog = _Dialog this.Dialog = _Dialog
if (!this.options.positions || this.options.positions.length < 2) { if (!this.options.positions || this.options.positions.length < 2) {
this._error = '线段最少需要两个坐标！' this._error = '线段最少需要两个坐标！'
@ -218,6 +220,8 @@ class PolylineObject extends Base {
set length(v) { set length(v) {
this.options.length = v this.options.length = v
//判断数值是否大于1000m
this._elms.length && this._elms.length &&
this._elms.length.forEach(item => { this._elms.length.forEach(item => {
item.value = v item.value = v
@ -240,21 +244,49 @@ class PolylineObject extends Base {
return this.options['length-unit'] return this.options['length-unit']
} }
set lengthUnit(v) { set lengthUnit(v) {
this.unitNum++
this.options['length-unit'] = v this.options['length-unit'] = v
this._elms.lengthUnit && this._elms.lengthUnit &&
this._elms.lengthUnit.forEach(item => { this._elms.lengthUnit.forEach(item => {
item.value = v item.value = v
}) })
if (this.options.lengthByMeter) {
if (this.unitNum > 2) {
switch (v) {
case '米':
this.length = this.noseToTail ? this.options.fitLengthByMeter : this.options.lengthByMeter
break
case '千米':
this.length = this.noseToTail ? (this.options.fitLengthByMeter / 1000).toFixed(5) : (this.options.lengthByMeter / 1000).toFixed(5)
break
default:
this.length = this.noseToTail ? this.options.fitLengthByMeter : this.options.lengthByMeter
}
} else {
let length = this.noseToTail ? this.options.fitLengthByMeter : this.options.lengthByMeter
this.lengthUnit = length > 1000 || length == 1000 ? '千米' : '米'
}
}
}
get wordsName() {
return this.options['words-name']
}
set wordsName(v) {
this.options['words-name'] = v
this._elms.wordsName &&
this._elms.wordsName.forEach(item => {
item.value = v
})
if (this.options.lengthByMeter) { if (this.options.lengthByMeter) {
switch (v) { switch (v) {
case '米': case '空间长度':
this.length = this.options.lengthByMeter
break break
case '千米': case '投影长度':
this.length = (this.options.lengthByMeter / 1000).toFixed(5) break
case '地表长度':
break break
default: default:
this.length = this.options.lengthByMeter break
} }
} }
} }
@ -306,69 +338,82 @@ class PolylineObject extends Base {
set lineType(v) { set lineType(v) {
let lineTypeData = [ let lineTypeData = [
{ {
name: '实线', name: '<i class="icon line"></i>实线',
value: '实线', value: '实线',
key: 0 key: 0,
icon: 'line'
}, },
{ {
name: '虚线', name: '<i class="icon dash-line"></i>虚线',
value: '虚线', value: '虚线',
key: 1 key: 1,
icon: 'dash-line'
}, },
{ {
name: '泛光', name: '<i class="icon light-line"></i>泛光',
value: '泛光', value: '泛光',
key: 2 key: 2,
icon: 'light-line'
}, },
{ {
name: '尾迹光线', name: '<i class="icon tail-line"></i>尾迹光线',
value: '尾迹光线', value: '尾迹光线',
key: 3 key: 3,
icon: 'tail-line'
}, },
{ {
name: '多尾迹光线', name: '<i class="icon mult-tail-line"></i>多尾迹光线',
value: '多尾迹光线', value: '多尾迹光线',
key: 4 key: 4,
icon: 'mult-tail-line'
}, },
{ {
name: '流动虚线1', name: '<i class="icon flow-dash-line1"></i>流动虚线1',
value: '流动虚线1', value: '流动虚线1',
key: 5 key: 5,
icon: 'flow-dash-line1'
}, },
{ {
name: '流动虚线2', name: '<i class="icon flow-dash-line2"></i>流动虚线2',
value: '流动虚线2', value: '流动虚线2',
key: 6 key: 6,
icon: 'flow-dash-line2'
}, },
{ {
name: '流动箭头1', name: '<i class="icon pic-line1"></i>流动箭头1',
value: '流动箭头1', value: '流动箭头1',
key: 7 key: 7,
icon: 'pic-line1'
}, },
{ {
name: '流动箭头2', name: '<i class="icon pic-line2"></i>流动箭头2',
value: '流动箭头2', value: '流动箭头2',
key: 8 key: 8,
icon: 'pic-line2'
}, },
{ {
name: '流动箭头3', name: '<i class="icon pic-line3"></i>流动箭头3',
value: '流动箭头3', value: '流动箭头3',
key: 9 key: 9,
icon: 'pic-line3'
}, },
{ {
name: '流动箭头4', name: '<i class="icon pic-line4"></i>流动箭头4',
value: '流动箭头4', value: '流动箭头4',
key: 10 key: 10,
icon: 'pic-line4'
}, },
{ {
name: '流动箭头5', name: '<i class="icon pic-line5"></i>流动箭头5',
value: '流动箭头5', value: '流动箭头5',
key: 11 key: 11,
icon: 'pic-line5'
}, },
{ {
name: '流动箭头6', name: '<i class="icon pic-line6"></i>流动箭头6',
value: '流动箭头6', value: '流动箭头6',
key: 12 key: 12,
icon: 'pic-line6'
} }
] ]
this.options.type = Number(v) this.options.type = Number(v)
@ -420,6 +465,20 @@ class PolylineObject extends Base {
) )
this.renewPolygon(fromDegreesArray) this.renewPolygon(fromDegreesArray)
} }
if (v) {
if (this.options.fitLengthByMeter > 1000 || this.options.fitLengthByMeter == 1000) {
document.getElementsByClassName('input-select-unit')[1].querySelectorAll('dd')[1].click()
} else {
document.getElementsByClassName('input-select-unit')[1].querySelectorAll('dd')[0].click()
}
} else {
if (this.options.lengthByMeter > 1000 || this.options.lengthByMeter == 1000) {
document.getElementsByClassName('input-select-unit')[1].querySelectorAll('dd')[1].click()
} else {
document.getElementsByClassName('input-select-unit')[1].querySelectorAll('dd')[0].click()
}
}
} }
get smooth() { get smooth() {
@ -1504,6 +1563,50 @@ class PolylineObject extends Base {
}) })
} }
let nameData = [
{
name: '空间长度',
value: '空间长度'
},
{
name: '投影长度',
value: '投影长度'
},
{
name: '地表长度',
value: '地表长度'
}
]
let nameDataLegpObject = legp(
this._DialogObject._element.content.getElementsByClassName(
'input-select-unit-box'
)[0],
'.input-select-unit'
)
if (nameDataLegpObject) {
nameDataLegpObject.legp_search(nameData)
let nameDataLegpElm = this._DialogObject._element.content
.getElementsByClassName('input-select-unit')[0]
.getElementsByTagName('input')[0]
this._elms.wordsName = [nameDataLegpElm]
nameDataLegpElm.value = this.options['words-name']
for (let i = 0; i < nameData.length; i++) {
if (nameData[i].value === nameDataLegpElm.value) {
nameDataLegpObject.legp_searchActive(nameData[i].value)
break
}
}
nameDataLegpElm.addEventListener('input', () => {
for (let i = 0; i < nameData.length; i++) {
if (nameData[i].value === nameDataLegpElm.value) {
this.wordsName = nameData[i].value
break
}
}
})
}
// 原始长度单位 // 原始长度单位
let unitData = [ let unitData = [
{ {
@ -1520,12 +1623,13 @@ class PolylineObject extends Base {
this._DialogObject._element.content.getElementsByClassName( this._DialogObject._element.content.getElementsByClassName(
'input-select-unit-box' 'input-select-unit-box'
)[0], )[0],
'.input-select-unit' '.input-select-unit',
1
) )
if (unitDataLegpObject) { if (unitDataLegpObject) {
unitDataLegpObject.legp_search(unitData) unitDataLegpObject.legp_search(unitData)
let unitDataLegpElm = this._DialogObject._element.content let unitDataLegpElm = this._DialogObject._element.content
.getElementsByClassName('input-select-unit')[0] .getElementsByClassName('input-select-unit')[1]
.getElementsByTagName('input')[0] .getElementsByTagName('input')[0]
this._elms.lengthUnit = [unitDataLegpElm] this._elms.lengthUnit = [unitDataLegpElm]
unitDataLegpElm.value = this.options['length-unit'] unitDataLegpElm.value = this.options['length-unit']
@ -1544,113 +1648,128 @@ class PolylineObject extends Base {
} }
}) })
} }
//
// 拟合长度单位 // 拟合长度单位
let fitUnitData = [ // let fitUnitData = [
{ // {
name: '米', // name: '米',
value: '米' // value: '米'
}, // },
{ // {
name: '千米', // name: '千米',
value: '千米' // value: '千米'
} // }
] // ]
let fitUnitDataLegpObject = legp( // let fitUnitDataLegpObject = legp(
this._DialogObject._element.content.getElementsByClassName( // this._DialogObject._element.content.getElementsByClassName(
'input-select-fit-unit-box' // 'input-select-fit-unit-box'
)[0], // )[0],
'.input-select-fit-unit' // '.input-select-fit-unit'
) // )
if (fitUnitDataLegpObject) { // if (fitUnitDataLegpObject) {
fitUnitDataLegpObject.legp_search(fitUnitData) // fitUnitDataLegpObject.legp_search(fitUnitData)
let fitUnitDataLegpElm = this._DialogObject._element.content // let fitUnitDataLegpElm = this._DialogObject._element.content
.getElementsByClassName('input-select-fit-unit')[0] // .getElementsByClassName('input-select-fit-unit')[0]
.getElementsByTagName('input')[0] // .getElementsByTagName('input')[0]
this._elms.fitLengthUnit = [fitUnitDataLegpElm] // this._elms.fitLengthUnit = [fitUnitDataLegpElm]
fitUnitDataLegpElm.value = this.options['fit-length-unit'] // fitUnitDataLegpElm.value = this.options['fit-length-unit']
for (let i = 0; i < fitUnitData.length; i++) { // for (let i = 0; i < fitUnitData.length; i++) {
if (fitUnitData[i].value === fitUnitDataLegpElm.value) { // if (fitUnitData[i].value === fitUnitDataLegpElm.value) {
fitUnitDataLegpObject.legp_searchActive(fitUnitData[i].value) // fitUnitDataLegpObject.legp_searchActive(fitUnitData[i].value)
break // break
} // }
} // }
fitUnitDataLegpElm.addEventListener('input', () => { // fitUnitDataLegpElm.addEventListener('input', () => {
for (let i = 0; i < fitUnitData.length; i++) { // for (let i = 0; i < fitUnitData.length; i++) {
if (fitUnitData[i].value === fitUnitDataLegpElm.value) { // if (fitUnitData[i].value === fitUnitDataLegpElm.value) {
this.fitLengthUnit = fitUnitData[i].value // this.fitLengthUnit = fitUnitData[i].value
break // break
} // }
} // }
}) // })
} // }
let lineTypeData = [ let lineTypeData = [
{ {
name: '实线', name: '<i class="icon line"></i>实线',
value: '实线', value: '实线',
key: 0 key: 0,
icon: 'line'
}, },
{ {
name: '虚线', name: '<i class="icon dash-line"></i>虚线',
value: '虚线', value: '虚线',
key: 1 key: 1,
icon: 'dash-line'
}, },
{ {
name: '泛光', name: '<i class="icon light-line"></i>泛光',
value: '泛光', value: '泛光',
key: 2 key: 2,
icon: 'light-line'
}, },
{ {
name: '尾迹光线', name: '<i class="icon tail-line"></i>尾迹光线',
value: '尾迹光线', value: '尾迹光线',
key: 3 key: 3,
icon: 'tail-line'
}, },
{ {
name: '多尾迹光线', name: '<i class="icon mult-tail-line"></i>多尾迹光线',
value: '多尾迹光线', value: '多尾迹光线',
key: 4 key: 4,
icon: 'mult-tail-line'
}, },
{ {
name: '流动虚线1', name: '<i class="icon flow-dash-line1"></i>流动虚线1',
value: '流动虚线1', value: '流动虚线1',
key: 5 key: 5,
icon: 'flow-dash-line1'
}, },
{ {
name: '流动虚线2', name: '<i class="icon flow-dash-line2"></i>流动虚线2',
value: '流动虚线2', value: '流动虚线2',
key: 6 key: 6,
icon: 'flow-dash-line2'
}, },
{ {
name: '流动箭头1', name: '<i class="icon pic-line1"></i>流动箭头1',
value: '流动箭头1', value: '流动箭头1',
key: 7 key: 7,
icon: 'pic-line1'
}, },
{ {
name: '流动箭头2', name: '<i class="icon pic-line2"></i>流动箭头2',
value: '流动箭头2', value: '流动箭头2',
key: 8 key: 8,
icon: 'pic-line2'
}, },
{ {
name: '流动箭头3', name: '<i class="icon pic-line3"></i>流动箭头3',
value: '流动箭头3', value: '流动箭头3',
key: 9 key: 9,
icon: 'pic-line3'
}, },
{ {
name: '流动箭头4', name: '<i class="icon pic-line4"></i>流动箭头4',
value: '流动箭头4', value: '流动箭头4',
key: 10 key: 10,
icon: 'pic-line4'
}, },
{ {
name: '流动箭头5', name: '<i class="icon pic-line5"></i>流动箭头5',
value: '流动箭头5', value: '流动箭头5',
key: 11 key: 11,
icon: 'pic-line5'
}, },
{ {
name: '流动箭头6', name: '<i class="icon pic-line6"></i>流动箭头6',
value: '流动箭头6', value: '流动箭头6',
key: 12 key: 12,
icon: 'pic-line6'
} }
] ]
let lineTypeDataLegpObject = legp( let lineTypeDataLegpObject = legp(
@ -1661,6 +1780,11 @@ class PolylineObject extends Base {
) )
if (lineTypeDataLegpObject) { if (lineTypeDataLegpObject) {
lineTypeDataLegpObject.legp_search(lineTypeData) lineTypeDataLegpObject.legp_search(lineTypeData)
let iActiveElm2 = document.createElement('i')
iActiveElm2.className = 'icon icon-active'
this._DialogObject._element.content.getElementsByClassName('input-select-line-type')[0].getElementsByClassName('cy_datalist')[0].appendChild(iActiveElm2)
let lineTypeDataLegpElm = this._DialogObject._element.content let lineTypeDataLegpElm = this._DialogObject._element.content
.getElementsByClassName('input-select-line-type')[0] .getElementsByClassName('input-select-line-type')[0]
.getElementsByTagName('input')[0] .getElementsByTagName('input')[0]
@ -1669,6 +1793,7 @@ class PolylineObject extends Base {
if (lineTypeData[i].key === this.options.type) { if (lineTypeData[i].key === this.options.type) {
lineTypeDataLegpObject.legp_searchActive(lineTypeData[i].value) lineTypeDataLegpObject.legp_searchActive(lineTypeData[i].value)
lineTypeDataLegpElm.value = lineTypeData[i].value lineTypeDataLegpElm.value = lineTypeData[i].value
iActiveElm2.className = `icon icon-active ${lineTypeData[i].icon}`
break break
} }
} }
@ -1676,6 +1801,7 @@ class PolylineObject extends Base {
for (let i = 0; i < lineTypeData.length; i++) { for (let i = 0; i < lineTypeData.length; i++) {
if (lineTypeData[i].value === lineTypeDataLegpElm.value) { if (lineTypeData[i].value === lineTypeDataLegpElm.value) {
this.lineType = lineTypeData[i].key this.lineType = lineTypeData[i].key
iActiveElm2.className = `icon icon-active ${lineTypeData[i].icon}`
//控制参数显隐 //控制参数显隐
if (2 < this.lineType && this.lineType < 13) {//贴图参数 if (2 < this.lineType && this.lineType < 13) {//贴图参数
@ -1696,6 +1822,11 @@ class PolylineObject extends Base {
}) })
} }
let heightBoxElm = this._DialogObject._element.content.getElementsByClassName('height-box')[0] let heightBoxElm = this._DialogObject._element.content.getElementsByClassName('height-box')[0]
let heightElm = heightBoxElm.getElementsByClassName('height')[0] let heightElm = heightBoxElm.getElementsByClassName('height')[0]
let heightConfirmElm = this._DialogObject._element.content.getElementsByClassName('height-confirm')[0] let heightConfirmElm = this._DialogObject._element.content.getElementsByClassName('height-confirm')[0]

48
src/Obj/Element/datalist.js
View File

@ -1,4 +1,4 @@
var legp = function (parentElement, ele) { var legp = function (parentElement, ele, index = 0) {
let targetValue = null let targetValue = null
return ({ return ({
that: Array.prototype.slice.call(parentElement.querySelectorAll(ele), 0), that: Array.prototype.slice.call(parentElement.querySelectorAll(ele), 0),
@ -16,10 +16,14 @@ var legp = function (parentElement, ele) {
item.style.cssText += "display:none;"; item.style.cssText += "display:none;";
}); });
}, },
show: function () { show: function (num) {
legp(parentElement, ele).that.forEach(function (item) { if (num !== undefined) {
item.style.cssText += "display:block;"; legp(parentElement, ele).that[num].style.cssText += "display:block;";
}); } else {
legp(parentElement, ele).that.forEach(function (item) {
item.style.cssText += "display:block;";
});
}
}, },
legp_searchList: function (name) { legp_searchList: function (name) {
let arr = []; let arr = [];
@ -28,19 +32,20 @@ var legp = function (parentElement, ele) {
}); });
return arr; return arr;
}, },
legp_search: function (tagData, search=false) { legp_search: function (tagData, search = false) {
var domId = legp(parentElement, ele).that[0]; // var domId = legp(parentElement, ele).that[0];
var domId = legp(parentElement, ele).that[index];
if (!domId) { if (!domId) {
return return
} }
var html = `<div class="cy_datalist"><i class="yj-custom-icon-arrow-down"></i>\n ${search ? '<input type="text" placeholder="\u8F93\u5165\u6216\u9009\u62E9" autocomplete="off">' : '<input type="text" class="datalist" readonly="readonly" placeholder="\u8bf7\u9009\u62e9" autocomplete="off">'}\n <dl style="display: none;position: absolute;background: rgba(0, 0, 0, 0.5);color: rgba(var(--color-sdk-base-rgb), 1);border: 1px solid rgba(var(--color-sdk-base-rgb), 0.2);border-radius: 3px;margin: 2px 0px;max-height: 300px;overflow-x: hidden;white-space: nowrap; font-size: 12px;z-index: 8;">\n </dl>\n </div>`; var html = `<div class="cy_datalist"><i class="yj-custom-icon-arrow-down"></i>\n ${search ? '<input type="text" placeholder="\u8F93\u5165\u6216\u9009\u62E9" autocomplete="off">' : `<input type="text" class="datalist ${index}" readonly="readonly" placeholder="\u8bf7\u9009\u62e9" autocomplete="off">`}\n <dl style="display: none;position: absolute;background: rgba(0, 0, 0, 0.5);color: rgba(var(--color-sdk-base-rgb), 1);border: 1px solid rgba(var(--color-sdk-base-rgb), 0.2);border-radius: 3px;margin: 2px 0px;max-height: 300px;overflow-x: hidden;white-space: nowrap; font-size: 12px;z-index: 8;">\n </dl>\n </div>`;
domId.innerHTML = html; domId.innerHTML = html;
// domId.appendChild(dom); // domId.appendChild(dom);
//获取当前广告 //获取当前广告
function myClick() { function myClick() {
legp(parentElement, ".cy_datalist dl dd").that.forEach(function (item) { legp(parentElement, ".cy_datalist dl dd").that.forEach(function (item) {
item.onclick = function (e) { item.onclick = function (e) {
if(!this || !this.attributes) { if (!this || !this.attributes) {
return return
} }
let value = this.attributes.value.value; let value = this.attributes.value.value;
@ -68,39 +73,42 @@ var legp = function (parentElement, ele) {
} }
//筛选 //筛选
legp(parentElement, ".cy_datalist input").that[0].oninput = function () { legp(parentElement, ".cy_datalist input").that[index].oninput = function (e) {
var val = this.value; //获取input值 var val = this.value; //获取input值
legp(parentElement, ".cy_datalist dl").hide();
// legp(parentElement, ".cy_datalist dl").hide();
if (tagData.length > 0) { if (tagData.length > 0) {
legp(parentElement, ".cy_datalist dl").show(); legp(parentElement, ".cy_datalist dl").show();
var sear_1 = new RegExp(val); var sear_1 = new RegExp(val);
var judge_1 = false; var judge_1 = false;
legp(parentElement, ".cy_datalist dl").that[0].innerHTML = ""; legp(parentElement, ".cy_datalist dl").that[index].innerHTML = "";
tagData.forEach(function (item) { tagData.forEach(function (item) {
if (sear_1.test(item.name)) { if (sear_1.test(item.name)) {
judge_1 = true; judge_1 = true;
legp(parentElement, ".cy_datalist dl").that[0].innerHTML += "<dd class=\"" + ((targetValue === item.value) ? 'active' : '') + "\" style=\"margin: 0; padding: 5px 5px; color: #fff;cursor: pointer;\" value=\"" + item.value + "\">" + item.name + "</dd>"; legp(parentElement, ".cy_datalist dl").that[index].innerHTML += "<dd class=\"" + ((targetValue === item.value) ? 'active' : '') + "\" style=\"margin: 0; padding: 5px 5px; color: #fff;cursor: pointer;\" value=\"" + item.value + "\">" + item.name + "</dd>";
} }
}); });
if (!judge_1) { if (!judge_1) {
legp(parentElement, ".cy_datalist dl").that[0].innerHTML = "<dd style=\"padding: 10px 20px; color: #fff;\">\u6682\u65E0\u6570\u636E</dd>"; legp(parentElement, ".cy_datalist dl").that[index].innerHTML = "<dd style=\"padding: 10px 20px; color: #fff;\">\u6682\u65E0\u6570\u636E</dd>";
} }
myClick(); myClick();
} }
}; };
//显示没被选择的 //显示没被选择的
legp(parentElement, ".cy_datalist input").that[0].onclick = function (e) { legp(parentElement, ".cy_datalist input").that[index].onclick = function (e) {
if(legp(parentElement, ".cy_datalist dl").that[0].style.display === 'none') {
legp(parentElement, ".cy_datalist dl").hide();
let num = e.srcElement.classList[1] * 1
num = num || 0
if (legp(parentElement, ".cy_datalist dl").that[num].style.display === 'none') {
if (tagData.length == 0) { if (tagData.length == 0) {
this.innerHTML = "暂无数据"; this.innerHTML = "暂无数据";
} }
else { else {
legp(parentElement, ".cy_datalist dl").show(); legp(parentElement, ".cy_datalist dl").show(num);
} }
legp(parentElement, ".cy_datalist dl").that[0].innerHTML = ""; legp(parentElement, ".cy_datalist dl").that[num].innerHTML = "";
tagData.forEach(function (item) { tagData.forEach(function (item) {
legp(parentElement, ".cy_datalist dl").that[0].innerHTML += "<dd class=\"" + ((targetValue === item.value) ? 'active' : '') + "\" style=\"margin: 0; padding: 5px 5px; color: #fff;cursor: pointer;\" value=\"" + item.value + "\">" + item.name + "</dd>"; legp(parentElement, ".cy_datalist dl").that[num].innerHTML += "<dd class=\"" + ((targetValue === item.value) ? 'active' : '') + "\" style=\"margin: 0; padding: 5px 5px; color: #fff;cursor: pointer;\" value=\"" + item.value + "\">" + item.name + "</dd>";
}); });
myClick(); myClick();
} }

110
static/custom/css/index.css
View File

@ -1515,6 +1515,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
height: 32px; height: 32px;
line-height: 32px;
} }
.YJ-custom-base-dialog>.content .cy_datalist dl dd:hover { .YJ-custom-base-dialog>.content .cy_datalist dl dd:hover {
@ -2649,7 +2650,116 @@
max-height: 185px; max-height: 185px;
} }
.YJ-custom-base-dialog.polyline>.content>div .input-select-unit-box textarea {
border-radius: unset!important;
}
.YJ-custom-base-dialog.polyline>.content>div .input-select-unit .datalist {
background-color:rgba(var(--color-sdk-base-rgb), 0.1)!important;
border-radius: 4px 0px 0px 4px !important;
}
.YJ-custom-base-dialog.polyline>.content>div .input-select-unit:nth-of-type(1) .datalist {
background-color:rgba(var(--color-sdk-base-rgb), 0.1)!important;
border-radius: 4px 0px, 0px, 4px!important;
}
.YJ-custom-base-dialog.polyline>.content>div .input-select-unit:nth-of-type(2) .datalist {
background-color:rgba(var(--color-sdk-base-rgb), 0.1)!important;
border-radius: 0px 4px 4px 0px!important;
}
.YJ-custom-base-dialog.polyline>.content>div .input-select-unit:nth-of-type(1) input {
border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5)!important;
}
.YJ-custom-base-dialog.polyline>.content>div .input-select-unit:nth-of-type(2) input {
border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5)!important;
}
.YJ-custom-base-dialog.polyline>.content input.input-text{
background-color: rgba(0, 0, 0, 0.5)!important;
border-radius: unset!important;
border-top: 1px solid rgba(var(--color-sdk-base-rgb), 0.5)!important;
border-bottom: 1px solid rgba(var(--color-sdk-base-rgb), 0.5) !important;
}
.YJ-custom-base-dialog.polyline>.content>div .input-select-line-type-box .cy_datalist input {
padding-left: 35px;
}
.YJ-custom-base-dialog.polyline>.content>div .input-select-line-type-box .icon-active {
position: absolute;
top: 11px;
left: 10px;
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;
}
.YJ-custom-base-dialog.polyline>.content>div .input-select-line-type-box .cy_datalist i.icon {
display: inline-block;
width: 22px;
height: 10px;
margin-right: 5px;
}
.YJ-custom-base-dialog.polyline>.content>div .input-select-line-type-box .cy_datalist i.line {
border: 1px solid rgba(255, 255, 255, 1);
height: 0px;
margin-top: 4px;
}
.YJ-custom-base-dialog.polyline>.content>div .input-select-line-type-box .cy_datalist i.dash-line {
border: 1px dashed rgba(255, 255, 255, 1);
height: 0px;
margin-top: 4px;
}
.YJ-custom-base-dialog.polyline>.content>div .input-select-line-type-box .cy_datalist i.light-line {
border: 1px solid rgba(255, 255, 255, 1);
height: 0px;
margin-top: 4px;
box-shadow: 0 0 3px #fff
}
.YJ-custom-base-dialog.polyline>.content>div .input-select-line-type-box .cy_datalist i.tail-line {
background: url(../../img/arrow/tail.png) 100% 100% no-repeat;
background-size: 100% 100%;
}
.YJ-custom-base-dialog.polyline>.content>div .input-select-line-type-box .cy_datalist i.mult-tail-line {
background: url(../../img/arrow/tail.png) 100% 100% no-repeat;
background-size: 100% 100%;
}
.YJ-custom-base-dialog.polyline>.content>div .input-select-line-type-box .cy_datalist i.flow-dash-line1 {
border: 1px dashed rgba(255, 255, 255, 1);
height: 0px;
margin-top: 4px;
}
.YJ-custom-base-dialog.polyline>.content>div .input-select-line-type-box .cy_datalist i.flow-dash-line2 {
border: 1px dashed rgba(255, 255, 255, 1);
height: 0px;
margin-top: 4px;
}
.YJ-custom-base-dialog.polyline>.content>div .input-select-line-type-box .cy_datalist i.pic-line1 {
background: url(../../img/arrow/1.png) 100% 100% no-repeat;
background-size: 100% 100%;
}
.YJ-custom-base-dialog.polyline>.content>div .input-select-line-type-box .cy_datalist i.pic-line2 {
background: url(../../img/arrow/2.png) 100% 100% no-repeat;
background-size: 100% 100%;
}
.YJ-custom-base-dialog.polyline>.content>div .input-select-line-type-box .cy_datalist i.pic-line3 {
background: url(../../img/arrow/3.png) 100% 100% no-repeat;
background-size: 100% 100%;
}
.YJ-custom-base-dialog.polyline>.content>div .input-select-line-type-box .cy_datalist i.pic-line4 {
background: url(../../img/arrow/4.png) 100% 100% no-repeat;
background-size: 100% 100%;
}
.YJ-custom-base-dialog.polyline>.content>div .input-select-line-type-box .cy_datalist i.pic-line5 {
background: url(../../img/arrow/5.png) 100% 100% no-repeat;
background-size: 100% 100%;
}
.YJ-custom-base-dialog.polyline>.content>div .input-select-line-type-box .cy_datalist i.pic-line6 {
background: url(../../img/arrow/6.png) 100% 100% no-repeat;
background-size: 100% 100%;
}
/* 贴地图片 */ /* 贴地图片 */
.YJ-custom-base-dialog.ground-image>.content { .YJ-custom-base-dialog.ground-image>.content {

BIN
static/img/arrow/tail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 511 B