From 80c27d0eef0bdd578f2648797e38f7280e250a73 Mon Sep 17 00:00:00 2001 From: zh <972939975@qq.com> Date: Wed, 19 Nov 2025 10:39:12 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=82=B9=E6=A0=87=E6=B3=A8rt?= =?UTF-8?q?mp=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Obj/Base/BillboardObject/index.js | 178 ++++++++++++++++++++++++++ src/Obj/Base/LabelObject/index.js | 25 +++- static/custom/css/index.css | 46 ++++--- 3 files changed, 225 insertions(+), 24 deletions(-) diff --git a/src/Obj/Base/BillboardObject/index.js b/src/Obj/Base/BillboardObject/index.js index 8665ac9..8610682 100644 --- a/src/Obj/Base/BillboardObject/index.js +++ b/src/Obj/Base/BillboardObject/index.js @@ -166,6 +166,8 @@ class BillboardObject extends Base { this.options.attribute.link.content || [] this.options.attribute.vr = this.options.attribute.vr || {} this.options.attribute.vr.content = this.options.attribute.vr.content || [] + this.options.attribute.rtmp = this.options.attribute.rtmp || {} + this.options.attribute.rtmp.content = this.options.attribute.rtmp.content || [] this.options.attribute.camera = this.options.attribute.camera || {} this.options.attribute.camera.content = this.options.attribute.camera.content || [] @@ -245,6 +247,12 @@ class BillboardObject extends Base { let font = getFontFamily(that.labelFontFamily) || 'Helvetica' let url = that.replaceHost(that.options.billboard.image, that.options.host) that._frameImages = [] + if(url) { + that.options.billboard.image = url + } + else { + that.options.billboard.image = that.getSourceRootPath() + '/img/A-ablu-blank.png' + } if (url && url.endsWith('gif')) { isGlf = true switch (that.options.heightMode) { @@ -480,6 +488,11 @@ class BillboardObject extends Base { // value: '传感器', // key: 'sensor' // }, + { + name: 'rtmp', + value: 'rtmp', + key: 'rtmp' + }, { name: '全景图', value: '全景图', @@ -1435,6 +1448,170 @@ class BillboardObject extends Base { } } + get attributeRtmp() { + return this.options.attribute.rtmp.content + } + + set attributeRtmp(v) { + this.options.attribute.rtmp.content = v + if ( + !this._DialogObject || + !this._DialogObject._element || + !this._DialogObject._element.content || + this._DialogObject._element.content.getElementsByClassName( + 'attribute-content-rtmp' + ).length == 0 + ) { + return + } + let table = this._DialogObject._element.content + .getElementsByClassName('attribute-content-rtmp')[1] + .getElementsByClassName('table')[0] + let tableContent = table.getElementsByClassName('table-body')[0] + tableContent.innerHTML = '' + if (this.options.attribute.rtmp.content.length > 0) { + table.getElementsByClassName('table-empty')[0].style.display = 'none' + } else { + table.getElementsByClassName('table-empty')[0].style.display = 'flex' + } + for (let i = 0; i < this.options.attribute.rtmp.content.length; i++) { + let tr = + ` +
+
` + + this.options.attribute.rtmp.content[i].name + + `
+
` + + this.options.attribute.rtmp.content[i].url + + `
+
+ + +
+
` + let trElm = document.createRange().createContextualFragment(tr) + tableContent.appendChild(trElm) + } + let item = tableContent.getElementsByClassName('tr') + let fun = { + rtmpEdit: async index => { + this.attributeRtmp = await this.options.attribute.rtmp.content + let table = this._DialogObject._element.content + .getElementsByClassName('attribute-content-rtmp')[1] + .getElementsByClassName('table')[0] + let tableContent = table.getElementsByClassName('table-body')[0] + let item = tableContent.getElementsByClassName('tr') + for (let i = 0; i < item.length; i++) { + if (index === i) { + let height = item[i].offsetHeight + let html = ` +
+ +
+
+ +
+
+ + +
` + item[i].innerHTML = html + let textareaElm = item[i].getElementsByClassName('link-edit')[0] + textareaElm.style.height = height - 10 + 'px' + let td = item[i].getElementsByClassName('td') + td[0].getElementsByClassName( + 'input' + )[0].value = this.options.attribute.rtmp.content[index].name + td[1].getElementsByClassName( + 'input' + )[0].value = this.options.attribute.rtmp.content[index].url + let btn = item[i].getElementsByTagName('button') + for (let n = 0; n < btn.length; n++) { + if (!btn[n] || !btn[n].attributes) { + continue + } + for (let m of btn[n].attributes) { + if (m.name === '@click') { + btn[n].addEventListener('click', e => { + if (typeof fun[m.value] === 'function') { + fun[m.value]( + { + name: td[0].getElementsByClassName('input')[0].value, + url: td[1].getElementsByClassName('input')[0].value + }, + i + ) + } + }) + btn[n].attributes.removeNamedItem(m.name) + break + } + } + } + break + } + } + }, + rtmpDelete: i => { + this.options.attribute.rtmp.content.splice(i, 1) + this.attributeRtmp = this.options.attribute.rtmp.content + }, + + confirmEdit: (value, i) => { + let name = value.name && value.name.replace(/\s/g, '') + let url = value.url && value.url.replace(/\s/g, '') + if (name && url) { + this.options.attribute.rtmp.content[i] = value + } else { + window.ELEMENT && + window.ELEMENT.Message({ + message: '名称或链接不能为空！', + type: 'warning', + duration: 1500 + }) + } + this.attributeRtmp = this.options.attribute.rtmp.content + }, + cancelEdit: () => { + this.attributeRtmp = this.options.attribute.rtmp.content + }, + fileSelect: (value, i) => { + let fileElm = item[i].getElementsByClassName('file-select')[0] + fileElm.click() + fileElm.removeEventListener('change', fileSelect) + fileElm.addEventListener('change', fileSelect) + } + } + let fileSelect = event => { + if (event.target.value) { + let td = item[ + event.target.getAttribute('index') + ].getElementsByClassName('td') + td[1].getElementsByClassName('input')[0].value = event.target.value + event.target.value = null + } + } + for (let i = 0; i < item.length; i++) { + let btn = item[i].getElementsByTagName('button') + for (let n = 0; n < btn.length; n++) { + if (!btn[n] || !btn[n].attributes) { + continue + } + for (let m of btn[n].attributes) { + if (m.name === '@click') { + btn[n].addEventListener('click', e => { + if (typeof fun[m.value] === 'function') { + fun[m.value](i) + } + }) + btn[n].attributes.removeNamedItem(m.name) + break + } + } + } + } + } + get attributeGoods() { return this.options.attribute.goods.content } @@ -2155,6 +2332,7 @@ class BillboardObject extends Base { this.alt = this.originalOptions.position.alt || 0 this.attributeLink = this.options.attribute.link.content this.attributeVr = this.options.attribute.vr.content + this.attributeRtmp = this.options.attribute.rtmp.content this.attributeCamera = this.options.attribute.camera.content this.attributeGoods = this.options.attribute.goods.content this.attributeISC = this.options.attribute.isc.content diff --git a/src/Obj/Base/LabelObject/index.js b/src/Obj/Base/LabelObject/index.js index a5e60e1..dadc2cf 100644 --- a/src/Obj/Base/LabelObject/index.js +++ b/src/Obj/Base/LabelObject/index.js @@ -494,6 +494,7 @@ class LabelObject extends Base { const ctx = this._canvas.getContext('2d') ctx.clearRect(0, 0, this._canvas.width, this._canvas.height); ctx.font = this.options.fontSize + 'px ' + this.font + this.options.outlineWidth = 0 let texts = this.options.text.split('\n') let canvasWidth = 0 let canvasHeight = 0 @@ -503,7 +504,7 @@ class LabelObject extends Base { if (width > canvasWidth) { canvasWidth = width } - canvasHeight += this.options.fontSize + canvasHeight += (this.options.fontSize + (this.options.outlineWidth * 2)) } canvasHeight = canvasHeight + 20 + (texts.length - 1) * 5 canvasWidth = canvasWidth + 30 @@ -526,7 +527,7 @@ class LabelObject extends Base { ctx.font = this.options.fontSize + 'px ' + this.font let maxWidth = 0 for (let i = 0; i < texts.length; i++) { - let width = ctx.measureText(texts[i]).width + let width = ctx.measureText(texts[i]).width + (this.options.outlineWidth * 2) if (maxWidth < width) { maxWidth = width } @@ -535,15 +536,25 @@ class LabelObject extends Base { let centerDistance = (canvasWidth - maxWidth) / 2 for (let i = 0; i < texts.length; i++) { const text = texts[i] + ctx.strokeStyle = this.options.outlineColor; // 边框颜色 + ctx.lineWidth = this.options.outlineWidth * 2; // 边框粗细 if (this.options.fontSize < 10) { - ctx.fillText(text, 15 + centerDistance, this.options.fontSize * (i + 1) + 10 + i * 5) + ctx.strokeText(text, 15 + centerDistance + this.options.outlineWidth, this.options.fontSize * (i + 1) + 10 + (i * 5) + this.options.outlineWidth); + ctx.fillText(text, 15 + centerDistance + this.options.outlineWidth, this.options.fontSize * (i + 1) + 10 + (i * 5) + this.options.outlineWidth) } else { + ctx.strokeText( + text, + 15 + centerDistance + this.options.outlineWidth, + (this.options.fontSize * (i + 1)) + + ((10 * 10) / this.options.fontSize) + + (i * 5) + (this.options.outlineWidth / 2) + ); ctx.fillText( text, - 15 + centerDistance, - this.options.fontSize * (i + 1) + - (10 * 10) / this.options.fontSize + - i * 5 + 15 + centerDistance + this.options.outlineWidth, + (this.options.fontSize * (i + 1)) + + ((10 * 10) / this.options.fontSize) + + (i * 5) + (this.options.outlineWidth / 2) ) } } diff --git a/static/custom/css/index.css b/static/custom/css/index.css index 5473aac..a3893dc 100644 --- a/static/custom/css/index.css +++ b/static/custom/css/index.css @@ -297,11 +297,6 @@ flex-wrap: wrap; } -.YJ-custom-base-dialog>.content .row .input-select-unit-box, -.YJ-custom-base-dialog>.content .row .input-select-fit-unit-box { - flex: 0 0 270px; -} - .YJ-custom-base-dialog>.content .row:last-child { margin-bottom: 0; } @@ -424,7 +419,8 @@ } .YJ-custom-base-dialog>.content .attribute .attribute-content-link .link_add_btn, -.YJ-custom-base-dialog>.content .attribute .attribute-content-vr .vr_add_btn { +.YJ-custom-base-dialog>.content .attribute .attribute-content-vr .vr_add_btn, +.YJ-custom-base-dialog>.content .attribute .attribute-content-rtmp .rtmp_add_btn { display: inline-block; width: 20px; height: 20px; @@ -436,12 +432,14 @@ } .YJ-custom-base-dialog>.content .attribute .attribute-content-link .link_add, -.YJ-custom-base-dialog>.content .attribute .attribute-content-vr .vr_add { +.YJ-custom-base-dialog>.content .attribute .attribute-content-vr .vr_add, +.YJ-custom-base-dialog>.content .attribute .attribute-content-rtmp .rtmp_add { padding-right: 30px; } .YJ-custom-base-dialog>.content .attribute .attribute-content-link .tr .td:last-child button:first-child, -.YJ-custom-base-dialog>.content .attribute .attribute-content-vr .tr .td:last-child button:first-child { +.YJ-custom-base-dialog>.content .attribute .attribute-content-vr .tr .td:last-child button:first-child, +.YJ-custom-base-dialog>.content .attribute .attribute-content-rtmp .tr .td:last-child button:first-child { margin-right: 5px; } @@ -531,7 +529,8 @@ } .YJ-custom-base-dialog>.content .attribute-content-link .table .table-body, -.YJ-custom-base-dialog>.content .attribute-content-vr .table .table-body { +.YJ-custom-base-dialog>.content .attribute-content-vr .table .table-body, +.YJ-custom-base-dialog>.content .attribute-content-rtmp .table .table-body { max-height: 172px; } @@ -816,8 +815,8 @@ .fly-roam>.content .table .tr .th:nth-child(2), .fly-roam>.content .table .tr .td:nth-child(2) { - flex: 0 0 100px; - width: 100px; + flex: 0 0 180px; + width: 180px; } .fly-roam>.content .table .tr .th:last-child, @@ -2514,7 +2513,9 @@ .YJ-custom-base-dialog.polygon>.content .attribute-content-link .table .tr .th:nth-child(3), .YJ-custom-base-dialog.polygon>.content .attribute-content-link .table .tr .td:nth-child(3), .YJ-custom-base-dialog.polygon>.content .attribute-content-vr .table .tr .th:nth-child(3), -.YJ-custom-base-dialog.polygon>.content .attribute-content-vr .table .tr .td:nth-child(3) { +.YJ-custom-base-dialog.polygon>.content .attribute-content-vr .table .tr .td:nth-child(3), +.YJ-custom-base-dialog.polygon>.content .attribute-content-rtmp .table .tr .th:nth-child(3), +.YJ-custom-base-dialog.polygon>.content .attribute-content-rtmp .table .tr .td:nth-child(3) { flex: 0 0 165px; width: 165px; justify-content: center; @@ -2596,7 +2597,9 @@ .YJ-custom-base-dialog.assemble>.content .attribute-content-link .table .tr .th:nth-child(3), .YJ-custom-base-dialog.assemble>.content .attribute-content-link .table .tr .td:nth-child(3), .YJ-custom-base-dialog.assemble>.content .attribute-content-vr .table .tr .th:nth-child(3), -.YJ-custom-base-dialog.assemble>.content .attribute-content-vr .table .tr .td:nth-child(3) { +.YJ-custom-base-dialog.assemble>.content .attribute-content-vr .table .tr .td:nth-child(3), +.YJ-custom-base-dialog.assemble>.content .attribute-content-rtmp .table .tr .th:nth-child(3), +.YJ-custom-base-dialog.assemble>.content .attribute-content-rtmp .table .tr .td:nth-child(3) { flex: 0 0 165px; width: 165px; justify-content: center; @@ -2643,14 +2646,20 @@ .YJ-custom-base-dialog.circle>.content .attribute-content-link .table .tr .td:nth-child(3), .YJ-custom-base-dialog.circle>.content .attribute-content-vr .table .tr .th:nth-child(3), .YJ-custom-base-dialog.circle>.content .attribute-content-vr .table .tr .td:nth-child(3), +.YJ-custom-base-dialog.circle>.content .attribute-content-rtmp .table .tr .th:nth-child(3), +.YJ-custom-base-dialog.circle>.content .attribute-content-rtmp .table .tr .td:nth-child(3), .YJ-custom-base-dialog.attackArrow>.content .attribute-content-link .table .tr .th:nth-child(3), .YJ-custom-base-dialog.attackArrow>.content .attribute-content-link .table .tr .td:nth-child(3), .YJ-custom-base-dialog.attackArrow>.content .attribute-content-vr .table .tr .th:nth-child(3), .YJ-custom-base-dialog.attackArrow>.content .attribute-content-vr .table .tr .td:nth-child(3), +.YJ-custom-base-dialog.attackArrow>.content .attribute-content-rtmp .table .tr .th:nth-child(3), +.YJ-custom-base-dialog.attackArrow>.content .attribute-content-rtmp .table .tr .td:nth-child(3), .YJ-custom-base-dialog.pincerArrow>.content .attribute-content-link .table .tr .th:nth-child(3), .YJ-custom-base-dialog.pincerArrow>.content .attribute-content-link .table .tr .td:nth-child(3), .YJ-custom-base-dialog.pincerArrow>.content .attribute-content-vr .table .tr .th:nth-child(3), -.YJ-custom-base-dialog.pincerArrow>.content .attribute-content-vr .table .tr .td:nth-child(3) { +.YJ-custom-base-dialog.pincerArrow>.content .attribute-content-vr .table .tr .td:nth-child(3), +.YJ-custom-base-dialog.pincerArrow>.content .attribute-content-rtmp .table .tr .th:nth-child(3), +.YJ-custom-base-dialog.pincerArrow>.content .attribute-content-rtmp .table .tr .td:nth-child(3) { flex: 0 0 165px; width: 165px; justify-content: center; @@ -2946,8 +2955,9 @@ .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-base1), 0.5) !important; - border-bottom: 1px solid rgba(var(--color-base1), 0.5) !important; + border: none; + border-top: 1px solid rgba(var(--color-base1), 0.7) !important; + border-bottom: 1px solid rgba(var(--color-base1), 0.7) !important; } .YJ-custom-base-dialog.polyline>.content>div .input-select-line-type-box .cy_datalist input { @@ -3133,7 +3143,9 @@ .YJ-custom-base-dialog.model>.content .attribute-content-link .table .tr .th:nth-child(2), .YJ-custom-base-dialog.model>.content .attribute-content-link .table .tr .td:nth-child(2), .YJ-custom-base-dialog.model>.content .attribute-content-vr .table .tr .th:nth-child(2), -.YJ-custom-base-dialog.model>.content .attribute-content-vr .table .tr .td:nth-child(2) { +.YJ-custom-base-dialog.model>.content .attribute-content-vr .table .tr .td:nth-child(2), +.YJ-custom-base-dialog.model>.content .attribute-content-rtmp .table .tr .th:nth-child(2), +.YJ-custom-base-dialog.model>.content .attribute-content-rtmp .table .tr .td:nth-child(2) { flex: 0 0 210px; width: 210px; justify-content: center;