增加点标注rtmp属性

2025-11-19 10:39:12 +08:00
parent 75b56f9562
commit 80c27d0eef
3 changed files with 225 additions and 24 deletions
--- 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 =
+        `
+      <div class="tr">
+          <div class="td">` +
+        this.options.attribute.rtmp.content[i].name +
+        `</div>
+          <div class="td">` +
+        this.options.attribute.rtmp.content[i].url +
+        `</div>
+          <div class="td">
+              <button @click="rtmpEdit">编辑</button>
+              <button @click="rtmpDelete">删除</button>
+          </div>
+      </div>`
+      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 = `
+              <div class="td">
+                <input class="input" type="text">
+              </div>
+              <div class="td">
+                <textarea class="input link-edit" type="text"></textarea>
+              </div>
+              <div class="td">
+                  <button @click="confirmEdit">确认</button>
+                  <button @click="cancelEdit">取消</button>
+              </div>`
+            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
--- 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)
        )
      }
    }
--- 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;