diff --git a/src/Obj/Base/PolylineObject/_element.js b/src/Obj/Base/PolylineObject/_element.js index 1f01892..c1356e5 100644 --- a/src/Obj/Base/PolylineObject/_element.js +++ b/src/Obj/Base/PolylineObject/_element.js @@ -9,22 +9,15 @@ function html(that) { 名称 -
+
- 原始长度: +
-
-
- 拟合长度: - -
-
-
@@ -48,7 +41,7 @@ function html(that) { m - +
@@ -72,7 +65,7 @@ function html(that) { 线条颜色
-
+
线条宽度
@@ -80,7 +73,7 @@ function html(that) {
-
+
线条形式
@@ -90,11 +83,11 @@ function html(that) { 首尾相连
-
+
线段圆滑
-
+
@@ -102,7 +95,7 @@ function html(that) { 动画顺向
-
+
动画时长
@@ -110,10 +103,11 @@ function html(that) {
-
+
间距
+
@@ -123,7 +117,7 @@ function html(that) { 线段缓冲
-
+
缓冲宽度
@@ -131,7 +125,7 @@ function html(that) {
-
+
缓冲颜色
diff --git a/src/Obj/Base/PolylineObject/index.js b/src/Obj/Base/PolylineObject/index.js index 63ec0b3..fbc6d8c 100644 --- a/src/Obj/Base/PolylineObject/index.js +++ b/src/Obj/Base/PolylineObject/index.js @@ -63,6 +63,7 @@ class PolylineObject extends Base { this.options.dashSize = options.dashSize || 0.03 this.options['length-unit'] = options['length-unit'] || '米' this.options['fit-length-unit'] = options['fit-length-unit'] || '米' + this.options['words-name'] = options['words-name'] || '空间长度' this.options['extend-width'] = options['extend-width'] || options['extend-width'] === 0 ? options['extend-width'] @@ -120,6 +121,7 @@ class PolylineObject extends Base { this.options.attributeType = options.attributeType || 'richText' this.operate = {} this.nodePoints = [] + this.unitNum = 0 this.Dialog = _Dialog if (!this.options.positions || this.options.positions.length < 2) { this._error = '线段最少需要两个坐标!' @@ -218,6 +220,8 @@ class PolylineObject extends Base { set length(v) { this.options.length = v + //判断数值是否大于1000m + this._elms.length && this._elms.length.forEach(item => { item.value = v @@ -240,21 +244,49 @@ class PolylineObject extends Base { return this.options['length-unit'] } set lengthUnit(v) { + this.unitNum++ this.options['length-unit'] = v this._elms.lengthUnit && this._elms.lengthUnit.forEach(item => { 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) { switch (v) { - case '米': - this.length = this.options.lengthByMeter + case '空间长度': break - case '千米': - this.length = (this.options.lengthByMeter / 1000).toFixed(5) + case '投影长度': + break + case '地表长度': break default: - this.length = this.options.lengthByMeter + break } } } @@ -306,69 +338,82 @@ class PolylineObject extends Base { set lineType(v) { let lineTypeData = [ { - name: '实线', + name: '实线', value: '实线', - key: 0 + key: 0, + icon: 'line' }, { - name: '虚线', + name: '虚线', value: '虚线', - key: 1 + key: 1, + icon: 'dash-line' }, { - name: '泛光', + name: '泛光', value: '泛光', - key: 2 + key: 2, + icon: 'light-line' }, { - name: '尾迹光线', + name: '尾迹光线', value: '尾迹光线', - key: 3 + key: 3, + icon: 'tail-line' }, { - name: '多尾迹光线', + name: '多尾迹光线', value: '多尾迹光线', - key: 4 + key: 4, + icon: 'mult-tail-line' }, { - name: '流动虚线1', + name: '流动虚线1', value: '流动虚线1', - key: 5 + key: 5, + icon: 'flow-dash-line1' }, { - name: '流动虚线2', + name: '流动虚线2', value: '流动虚线2', - key: 6 + key: 6, + icon: 'flow-dash-line2' }, { - name: '流动箭头1', + name: '流动箭头1', value: '流动箭头1', - key: 7 + key: 7, + icon: 'pic-line1' }, { - name: '流动箭头2', + name: '流动箭头2', value: '流动箭头2', - key: 8 + key: 8, + icon: 'pic-line2' }, { - name: '流动箭头3', + name: '流动箭头3', value: '流动箭头3', - key: 9 + key: 9, + icon: 'pic-line3' }, { - name: '流动箭头4', + name: '流动箭头4', value: '流动箭头4', - key: 10 + key: 10, + icon: 'pic-line4' }, { - name: '流动箭头5', + name: '流动箭头5', value: '流动箭头5', - key: 11 + key: 11, + icon: 'pic-line5' }, { - name: '流动箭头6', + name: '流动箭头6', value: '流动箭头6', - key: 12 + key: 12, + icon: 'pic-line6' } ] this.options.type = Number(v) @@ -420,6 +465,20 @@ class PolylineObject extends Base { ) 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() { @@ -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 = [ { @@ -1520,12 +1623,13 @@ class PolylineObject extends Base { this._DialogObject._element.content.getElementsByClassName( 'input-select-unit-box' )[0], - '.input-select-unit' + '.input-select-unit', + 1 ) if (unitDataLegpObject) { unitDataLegpObject.legp_search(unitData) let unitDataLegpElm = this._DialogObject._element.content - .getElementsByClassName('input-select-unit')[0] + .getElementsByClassName('input-select-unit')[1] .getElementsByTagName('input')[0] this._elms.lengthUnit = [unitDataLegpElm] unitDataLegpElm.value = this.options['length-unit'] @@ -1544,113 +1648,128 @@ class PolylineObject extends Base { } }) } + // + // 拟合长度单位 - let fitUnitData = [ - { - name: '米', - value: '米' - }, - { - name: '千米', - value: '千米' - } - ] + // let fitUnitData = [ + // { + // name: '米', + // value: '米' + // }, + // { + // name: '千米', + // value: '千米' + // } + // ] - let fitUnitDataLegpObject = legp( - this._DialogObject._element.content.getElementsByClassName( - 'input-select-fit-unit-box' - )[0], - '.input-select-fit-unit' - ) - if (fitUnitDataLegpObject) { - fitUnitDataLegpObject.legp_search(fitUnitData) - let fitUnitDataLegpElm = this._DialogObject._element.content - .getElementsByClassName('input-select-fit-unit')[0] - .getElementsByTagName('input')[0] - this._elms.fitLengthUnit = [fitUnitDataLegpElm] - fitUnitDataLegpElm.value = this.options['fit-length-unit'] - for (let i = 0; i < fitUnitData.length; i++) { - if (fitUnitData[i].value === fitUnitDataLegpElm.value) { - fitUnitDataLegpObject.legp_searchActive(fitUnitData[i].value) - break - } - } - fitUnitDataLegpElm.addEventListener('input', () => { - for (let i = 0; i < fitUnitData.length; i++) { - if (fitUnitData[i].value === fitUnitDataLegpElm.value) { - this.fitLengthUnit = fitUnitData[i].value - break - } - } - }) - } + // let fitUnitDataLegpObject = legp( + // this._DialogObject._element.content.getElementsByClassName( + // 'input-select-fit-unit-box' + // )[0], + // '.input-select-fit-unit' + // ) + // if (fitUnitDataLegpObject) { + // fitUnitDataLegpObject.legp_search(fitUnitData) + // let fitUnitDataLegpElm = this._DialogObject._element.content + // .getElementsByClassName('input-select-fit-unit')[0] + // .getElementsByTagName('input')[0] + // this._elms.fitLengthUnit = [fitUnitDataLegpElm] + // fitUnitDataLegpElm.value = this.options['fit-length-unit'] + // for (let i = 0; i < fitUnitData.length; i++) { + // if (fitUnitData[i].value === fitUnitDataLegpElm.value) { + // fitUnitDataLegpObject.legp_searchActive(fitUnitData[i].value) + // break + // } + // } + // fitUnitDataLegpElm.addEventListener('input', () => { + // for (let i = 0; i < fitUnitData.length; i++) { + // if (fitUnitData[i].value === fitUnitDataLegpElm.value) { + // this.fitLengthUnit = fitUnitData[i].value + // break + // } + // } + // }) + // } let lineTypeData = [ { - name: '实线', + name: '实线', value: '实线', - key: 0 + key: 0, + icon: 'line' }, { - name: '虚线', + name: '虚线', value: '虚线', - key: 1 + key: 1, + icon: 'dash-line' }, { - name: '泛光', + name: '泛光', value: '泛光', - key: 2 + key: 2, + icon: 'light-line' }, { - name: '尾迹光线', + name: '尾迹光线', value: '尾迹光线', - key: 3 + key: 3, + icon: 'tail-line' }, { - name: '多尾迹光线', + name: '多尾迹光线', value: '多尾迹光线', - key: 4 + key: 4, + icon: 'mult-tail-line' }, { - name: '流动虚线1', + name: '流动虚线1', value: '流动虚线1', - key: 5 + key: 5, + icon: 'flow-dash-line1' }, { - name: '流动虚线2', + name: '流动虚线2', value: '流动虚线2', - key: 6 + key: 6, + icon: 'flow-dash-line2' }, { - name: '流动箭头1', + name: '流动箭头1', value: '流动箭头1', - key: 7 + key: 7, + icon: 'pic-line1' }, { - name: '流动箭头2', + name: '流动箭头2', value: '流动箭头2', - key: 8 + key: 8, + icon: 'pic-line2' }, { - name: '流动箭头3', + name: '流动箭头3', value: '流动箭头3', - key: 9 + key: 9, + icon: 'pic-line3' }, { - name: '流动箭头4', + name: '流动箭头4', value: '流动箭头4', - key: 10 + key: 10, + icon: 'pic-line4' }, { - name: '流动箭头5', + name: '流动箭头5', value: '流动箭头5', - key: 11 + key: 11, + icon: 'pic-line5' }, { - name: '流动箭头6', + name: '流动箭头6', value: '流动箭头6', - key: 12 + key: 12, + icon: 'pic-line6' } ] let lineTypeDataLegpObject = legp( @@ -1661,6 +1780,11 @@ class PolylineObject extends Base { ) if (lineTypeDataLegpObject) { 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 .getElementsByClassName('input-select-line-type')[0] .getElementsByTagName('input')[0] @@ -1669,6 +1793,7 @@ class PolylineObject extends Base { if (lineTypeData[i].key === this.options.type) { lineTypeDataLegpObject.legp_searchActive(lineTypeData[i].value) lineTypeDataLegpElm.value = lineTypeData[i].value + iActiveElm2.className = `icon icon-active ${lineTypeData[i].icon}` break } } @@ -1676,6 +1801,7 @@ class PolylineObject extends Base { for (let i = 0; i < lineTypeData.length; i++) { if (lineTypeData[i].value === lineTypeDataLegpElm.value) { this.lineType = lineTypeData[i].key + iActiveElm2.className = `icon icon-active ${lineTypeData[i].icon}` //控制参数显隐 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 heightElm = heightBoxElm.getElementsByClassName('height')[0] let heightConfirmElm = this._DialogObject._element.content.getElementsByClassName('height-confirm')[0] diff --git a/src/Obj/Element/datalist.js b/src/Obj/Element/datalist.js index e1d9974..9125ca6 100644 --- a/src/Obj/Element/datalist.js +++ b/src/Obj/Element/datalist.js @@ -1,14 +1,14 @@ -var legp = function (parentElement, ele) { +var legp = function (parentElement, ele, index = 0) { let targetValue = null return ({ that: Array.prototype.slice.call(parentElement.querySelectorAll(ele), 0), stopPropagation: function (e) { e = e || window.event; - if (e.stopPropagation) { //W3C阻止冒泡方法 + if (e.stopPropagation) { //W3C阻止冒泡方法 e.stopPropagation(); } else { - e.cancelBubble = true; //IE阻止冒泡方法 + e.cancelBubble = true; //IE阻止冒泡方法 } }, hide: function () { @@ -16,10 +16,14 @@ var legp = function (parentElement, ele) { item.style.cssText += "display:none;"; }); }, - show: function () { - legp(parentElement, ele).that.forEach(function (item) { - item.style.cssText += "display:block;"; - }); + show: function (num) { + if (num !== undefined) { + 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) { let arr = []; @@ -28,19 +32,20 @@ var legp = function (parentElement, ele) { }); return arr; }, - legp_search: function (tagData, search=false) { - var domId = legp(parentElement, ele).that[0]; + legp_search: function (tagData, search = false) { + // var domId = legp(parentElement, ele).that[0]; + var domId = legp(parentElement, ele).that[index]; if (!domId) { return } - var html = `
\n ${search ? '' : ''}\n
\n
\n
`; + var html = `
\n ${search ? '' : ``}\n
\n
\n
`; domId.innerHTML = html; // domId.appendChild(dom); //获取当前广告 function myClick() { legp(parentElement, ".cy_datalist dl dd").that.forEach(function (item) { item.onclick = function (e) { - if(!this || !this.attributes) { + if (!this || !this.attributes) { return } 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值 - - // legp(parentElement, ".cy_datalist dl").hide(); + legp(parentElement, ".cy_datalist dl").hide(); if (tagData.length > 0) { legp(parentElement, ".cy_datalist dl").show(); var sear_1 = new RegExp(val); var judge_1 = false; - legp(parentElement, ".cy_datalist dl").that[0].innerHTML = ""; + legp(parentElement, ".cy_datalist dl").that[index].innerHTML = ""; tagData.forEach(function (item) { if (sear_1.test(item.name)) { judge_1 = true; - legp(parentElement, ".cy_datalist dl").that[0].innerHTML += "
" + item.name + "
"; + legp(parentElement, ".cy_datalist dl").that[index].innerHTML += "
" + item.name + "
"; } }); if (!judge_1) { - legp(parentElement, ".cy_datalist dl").that[0].innerHTML = "
\u6682\u65E0\u6570\u636E
"; + legp(parentElement, ".cy_datalist dl").that[index].innerHTML = "
\u6682\u65E0\u6570\u636E
"; } myClick(); } }; //显示没被选择的 - legp(parentElement, ".cy_datalist input").that[0].onclick = function (e) { - if(legp(parentElement, ".cy_datalist dl").that[0].style.display === 'none') { + legp(parentElement, ".cy_datalist input").that[index].onclick = function (e) { + + 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) { this.innerHTML = "暂无数据"; } 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) { - legp(parentElement, ".cy_datalist dl").that[0].innerHTML += "
" + item.name + "
"; + legp(parentElement, ".cy_datalist dl").that[num].innerHTML += "
" + item.name + "
"; }); myClick(); } diff --git a/static/custom/css/index.css b/static/custom/css/index.css index 0933ac5..35938bb 100644 --- a/static/custom/css/index.css +++ b/static/custom/css/index.css @@ -1515,6 +1515,7 @@ display: flex; align-items: center; height: 32px; + line-height: 32px; } .YJ-custom-base-dialog>.content .cy_datalist dl dd:hover { @@ -2649,7 +2650,116 @@ 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 { diff --git a/static/img/arrow/tail.png b/static/img/arrow/tail.png new file mode 100644 index 0000000..9b97199 Binary files /dev/null and b/static/img/arrow/tail.png differ