2025-07-03 13:54:01 +08:00
|
|
|
import { getHost, getToken } from "../../on";
|
|
|
|
|
import { generatePagination } from "./Pagination";
|
|
|
|
|
import { legp } from './datalist';
|
|
|
|
|
|
|
|
|
|
function attributeElm(that) {
|
|
|
|
|
let host = getHost()
|
|
|
|
|
|
|
|
|
|
that.cameraSelect = cameraSelect
|
|
|
|
|
that.ISCSelect = ISCSelect
|
|
|
|
|
that.goodsSelect = goodsSelect
|
|
|
|
|
that.goodsFilter = goodsFilter
|
|
|
|
|
that.cameraName = ''
|
|
|
|
|
that.ISCName = ''
|
|
|
|
|
const type = {
|
|
|
|
|
'1': '海康',
|
|
|
|
|
'2': '大华'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let cameraPageSize = 5
|
|
|
|
|
let iscPageSize = 5
|
|
|
|
|
let goodsPageSize = 999999
|
|
|
|
|
|
|
|
|
|
function cameraSelect(page) {
|
|
|
|
|
if (!that.attributeSelect) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
let flag = false
|
|
|
|
|
for (let i = 0; i < that.attributeSelect.length; i++) {
|
|
|
|
|
if (that.attributeSelect[i].key === 'camera') {
|
|
|
|
|
flag = true
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (!flag) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
let firstPage = page
|
|
|
|
|
page = !page || typeof page === 'object' ? 1 : page
|
|
|
|
|
let attributeCameraElm
|
|
|
|
|
if (that._DialogObject && that._DialogObject._element && that._DialogObject._element.content) {
|
|
|
|
|
let paginationElm = that._DialogObject._element.content.getElementsByClassName('pagination')[0]
|
|
|
|
|
attributeCameraElm = that._DialogObject._element.content.getElementsByClassName('attribute-content-camera')[0]
|
|
|
|
|
if (!paginationElm) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if (!attributeCameraElm) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
generatePagination(paginationElm, 1, 10, 1);
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
let url = ""
|
|
|
|
|
const params = {
|
|
|
|
|
cameraName: that.cameraName,
|
|
|
|
|
page: page,
|
|
|
|
|
pageSize: cameraPageSize
|
|
|
|
|
};
|
|
|
|
|
const queryString = new URLSearchParams(params).toString();
|
|
|
|
|
if (host.endsWith("yjearth4.0"))
|
|
|
|
|
url = `${host}/api/v1/cameraData/list?${queryString}`
|
|
|
|
|
else
|
|
|
|
|
url = `${host}/yjearth4.0/api/v1/cameraData/list?${queryString}`
|
|
|
|
|
fetch(url, {
|
|
|
|
|
method: 'get',
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
"token": getToken(),
|
|
|
|
|
"Authorization": "Bearer " + getToken(),
|
|
|
|
|
}
|
|
|
|
|
}).then((response) => {
|
|
|
|
|
if (response.status === 200) {
|
|
|
|
|
response.json().then((data) => {
|
|
|
|
|
if (data.code === 200 || data.code === 0) {
|
|
|
|
|
if (!that._DialogObject || !that._DialogObject._element || !that._DialogObject._element.content || !attributeCameraElm) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
let paginationElm = attributeCameraElm.getElementsByClassName('pagination')[0]
|
|
|
|
|
let table = that._DialogObject._element.content.getElementsByClassName('camera-table')[0]
|
|
|
|
|
let tableContent = table.getElementsByClassName('table-body')[0]
|
|
|
|
|
tableContent.innerHTML = ''
|
|
|
|
|
if (data.rows) {
|
|
|
|
|
data.data = {
|
|
|
|
|
list: [...data.rows],
|
|
|
|
|
total: data.total
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (data.data) {
|
|
|
|
|
if (data.data.list && data.data.list.length > 0) {
|
|
|
|
|
generatePagination(paginationElm, data.data.total, cameraPageSize, 1, (pageIndex) => {
|
|
|
|
|
that.cameraSelect(pageIndex)
|
|
|
|
|
});
|
|
|
|
|
table.getElementsByClassName('table-empty')[0].style.display = 'none'
|
|
|
|
|
tableContent.style.display = 'inline-flex'
|
|
|
|
|
let checkboxArray = []
|
|
|
|
|
for (let i = 0; i < data.data.list.length; i++) {
|
|
|
|
|
let tr = `
|
|
|
|
|
<div class="tr">
|
|
|
|
|
<div class="td">
|
2025-08-26 15:34:07 +08:00
|
|
|
<input type="checkbox" value="${data.data.list[i].deviceId}">
|
2025-07-03 13:54:01 +08:00
|
|
|
<span>绑定</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="td">${data.data.list[i].cameraName}</div>
|
|
|
|
|
<div class="td center" style="width: 80px; flex: 0 80px; min-width: 80px;">${type[data.data.list[i].type]}</div>
|
|
|
|
|
<div class="td center" style="width: 126px; flex: 0 126px;min-width: 126px;">${data.data.list[i].ip}</div>
|
|
|
|
|
<div class="td center" style="width: 80px; flex: 0 80px;min-width: 80px;">${data.data.list[i].port}</div>
|
|
|
|
|
<div class="td center" style="width: 80px; flex: 0 80px;min-width: 80px;">${data.data.list[i].userName}</div>
|
|
|
|
|
<div class="td center">${data.data.list[i].passWord || data.data.list[i].password}</div>
|
|
|
|
|
</div>`
|
|
|
|
|
let trElm = document.createRange().createContextualFragment(tr)
|
|
|
|
|
let checkbox = trElm.querySelector('input[type="checkbox"]')
|
|
|
|
|
checkboxArray.push(checkbox)
|
|
|
|
|
checkbox.addEventListener('change', () => {
|
|
|
|
|
if (checkbox.checked) {
|
|
|
|
|
// 只选中一个
|
|
|
|
|
that.attributeCamera = []
|
|
|
|
|
that.attributeCamera.push(data.data.list[i])
|
|
|
|
|
for (let j = 0; j < checkboxArray.length; j++) {
|
|
|
|
|
if (checkboxArray[j] !== checkbox) {
|
|
|
|
|
checkboxArray[j].checked = false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
let newArray = that.attributeCamera.filter((item) => {
|
2025-08-26 15:34:07 +08:00
|
|
|
if ('deviceId' in data.data.list[i]) {
|
|
|
|
|
return item.deviceId !== data.data.list[i].deviceId
|
2025-07-03 13:54:01 +08:00
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
that.attributeCamera = newArray
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
tableContent.appendChild(trElm)
|
|
|
|
|
|
|
|
|
|
for (let m = 0; m < that.attributeCamera.length; m++) {
|
2025-08-26 15:34:07 +08:00
|
|
|
if (('deviceId' in data.data.list[i]) ? (that.attributeCamera[m].deviceId === data.data.list[i].deviceId):false) {
|
2025-07-03 13:54:01 +08:00
|
|
|
checkbox.checked = true
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (data.data && data.data.total) {
|
|
|
|
|
generatePagination(paginationElm, data.data.total, cameraPageSize, page, (pageIndex) => {
|
|
|
|
|
that.cameraSelect(pageIndex)
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
generatePagination(paginationElm, 1, cameraPageSize, 1);
|
|
|
|
|
table.getElementsByClassName('table-empty')[0].style.display = 'flex'
|
|
|
|
|
tableContent.style.display = 'none'
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
console.error(data.message)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 查询全部
|
|
|
|
|
if (!firstPage) {
|
|
|
|
|
const params2 = {
|
|
|
|
|
page: 1,
|
|
|
|
|
pageSize: 99999999
|
|
|
|
|
};
|
|
|
|
|
const queryString2 = new URLSearchParams(params2).toString();
|
|
|
|
|
if (host.endsWith("yjearth4.0"))
|
|
|
|
|
url = `${host}/api/v1/cameraData/list?${queryString2}`
|
|
|
|
|
else
|
|
|
|
|
url = `${host}/yjearth4.0/api/v1/cameraData/list?${queryString2}`
|
|
|
|
|
fetch(url, {
|
|
|
|
|
method: 'get',
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
"token": getToken(),
|
|
|
|
|
"Authorization": "Bearer " + getToken(),
|
|
|
|
|
}
|
|
|
|
|
}).then((response) => {
|
|
|
|
|
if (response.status === 200) {
|
|
|
|
|
response.json().then((data) => {
|
|
|
|
|
if (data.code === 200 || data.code === 0) {
|
|
|
|
|
if (!that._DialogObject || !that._DialogObject._element || !that._DialogObject._element.content || !attributeCameraElm) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if (data.rows) {
|
|
|
|
|
data.data = {
|
|
|
|
|
list: [...data.rows],
|
|
|
|
|
total: data.total
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (data.data) {
|
|
|
|
|
if (data.data.list) {
|
|
|
|
|
for (let i = that.attributeCamera.length - 1; i >= 0; i--) {
|
|
|
|
|
let flag = false
|
|
|
|
|
for (let m = 0; m < data.data.list.length; m++) {
|
2025-08-26 15:34:07 +08:00
|
|
|
if (that.attributeCamera[i].deviceId === data.data.list[m].deviceId) {
|
|
|
|
|
flag = true
|
|
|
|
|
break
|
2025-07-03 13:54:01 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (!flag) {
|
|
|
|
|
that.attributeCamera.splice(i, 1)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
that.attributeCamera = []
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
that.attributeCamera = []
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
console.error(data.message)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function ISCSelect(page) {
|
|
|
|
|
if (!that.attributeSelect) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
let flag = false
|
|
|
|
|
for (let i = 0; i < that.attributeSelect.length; i++) {
|
|
|
|
|
if (that.attributeSelect[i].key === 'isc') {
|
|
|
|
|
flag = true
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (!flag) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
page = !page || typeof page === 'object' ? 1 : page
|
|
|
|
|
let attributeCameraElm
|
|
|
|
|
if (that._DialogObject && that._DialogObject._element && that._DialogObject._element.content) {
|
|
|
|
|
let paginationElm = that._DialogObject._element.content.getElementsByClassName('pagination')[0]
|
|
|
|
|
attributeCameraElm = that._DialogObject._element.content.getElementsByClassName('attribute-content-isc')[0]
|
|
|
|
|
if (!paginationElm) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if (!attributeCameraElm) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
generatePagination(paginationElm, 1, 10, 1);
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
let url = ""
|
|
|
|
|
const params = {
|
|
|
|
|
// name: that.iscName,
|
|
|
|
|
page: page,
|
|
|
|
|
page_size: iscPageSize
|
|
|
|
|
};
|
|
|
|
|
const queryString = new URLSearchParams(params).toString();
|
|
|
|
|
if (host.endsWith("yjearth4.0"))
|
|
|
|
|
url = `${host}/api/v1/isc/list?${queryString}`
|
|
|
|
|
else
|
|
|
|
|
url = `${host}/yjearth4.0/api/v1/isc/list?${queryString}`
|
|
|
|
|
fetch(url, {
|
|
|
|
|
method: 'get',
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
"token": getToken(),
|
|
|
|
|
"Authorization": "Bearer " + getToken(),
|
|
|
|
|
}
|
|
|
|
|
}).then((response) => {
|
|
|
|
|
if (response.status === 200) {
|
|
|
|
|
response.json().then((data) => {
|
|
|
|
|
if (data.code === 200 || data.code === 0) {
|
|
|
|
|
if (!that._DialogObject || !that._DialogObject._element || !that._DialogObject._element.content || !attributeCameraElm) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
let paginationElm = attributeCameraElm.getElementsByClassName('pagination')[0]
|
|
|
|
|
let table = that._DialogObject._element.content.getElementsByClassName('isc-table')[0]
|
|
|
|
|
let tableContent = table.getElementsByClassName('table-body')[0]
|
|
|
|
|
tableContent.innerHTML = ''
|
|
|
|
|
if (data.rows) {
|
|
|
|
|
data.data = {
|
|
|
|
|
list: [...data.rows],
|
|
|
|
|
total: data.total
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (data.data) {
|
|
|
|
|
if (data.data.list && data.data.list.length > 0) {
|
|
|
|
|
generatePagination(paginationElm, data.data.total, iscPageSize, 1, (pageIndex) => {
|
|
|
|
|
that.ISCSelect(pageIndex)
|
|
|
|
|
});
|
|
|
|
|
table.getElementsByClassName('table-empty')[0].style.display = 'none'
|
|
|
|
|
tableContent.style.display = 'flex'
|
|
|
|
|
for (let i = 0; i < data.data.list.length; i++) {
|
|
|
|
|
let tr = `
|
|
|
|
|
<div class="tr">
|
|
|
|
|
<div class="td">
|
|
|
|
|
<input type="checkbox" value="${'ID' in data.data.list[i] ? data.data.list[i].ID : data.data.list[i].id}">
|
|
|
|
|
<span>绑定</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="td">${data.data.list[i].name}</div>
|
|
|
|
|
<div class="td center" style="width: 180px; flex: 0 180px; min-width: 180px;">${data.data.list[i].status ? '在线' : '离线'}</div>
|
|
|
|
|
</div>`
|
|
|
|
|
let trElm = document.createRange().createContextualFragment(tr)
|
|
|
|
|
let checkbox = trElm.querySelector('input[type="checkbox"]')
|
|
|
|
|
checkbox.addEventListener('change', () => {
|
|
|
|
|
if (checkbox.checked) {
|
|
|
|
|
that.attributeISC.push(data.data.list[i])
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
let newArray = that.attributeISC.filter((item) => {
|
|
|
|
|
if ('ID' in data.data.list[i]) {
|
|
|
|
|
return item.ID !== data.data.list[i].ID
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
return item.id !== data.data.list[i].id
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
that.attributeISC = newArray
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
tableContent.appendChild(trElm)
|
|
|
|
|
|
|
|
|
|
for (let m = 0; m < that.attributeISC.length; m++) {
|
|
|
|
|
if (('ID' in data.data.list[i]) ? (that.attributeISC[m].ID === data.data.list[i].ID) : (that.attributeISC[m].id === data.data.list[i].id)) {
|
|
|
|
|
checkbox.checked = true
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (data.data && data.data.total) {
|
|
|
|
|
generatePagination(paginationElm, data.data.total, iscPageSize, page, (pageIndex) => {
|
|
|
|
|
that.ISCSelect(pageIndex)
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
generatePagination(paginationElm, 1, iscPageSize, 1);
|
|
|
|
|
table.getElementsByClassName('table-empty')[0].style.display = 'flex'
|
|
|
|
|
tableContent.style.display = 'none'
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
console.error(data.message)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function goodsSelect(page) {
|
|
|
|
|
if (!that.attributeSelect) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
let flag = false
|
|
|
|
|
for (let i = 0; i < that.attributeSelect.length; i++) {
|
|
|
|
|
if (that.attributeSelect[i].key === 'goods') {
|
|
|
|
|
flag = true
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (!flag) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
page = !page || typeof page === 'object' ? 1 : page
|
|
|
|
|
let attributeElm
|
|
|
|
|
if (that._DialogObject && that._DialogObject._element && that._DialogObject._element.content) {
|
|
|
|
|
let paginationElm = that._DialogObject._element.content.getElementsByClassName('pagination')[0]
|
|
|
|
|
attributeElm = that._DialogObject._element.content.getElementsByClassName('attribute-content-goods')[0]
|
|
|
|
|
if (!paginationElm) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if (!attributeElm) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
// generatePagination(paginationElm, 1, 10, 1);
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
let url = ""
|
|
|
|
|
const params = {
|
|
|
|
|
page: page,
|
|
|
|
|
page_size: goodsPageSize
|
|
|
|
|
};
|
|
|
|
|
const queryString = new URLSearchParams(params).toString();
|
|
|
|
|
if (host.endsWith("yjearth4.0"))
|
|
|
|
|
url = `${host}/api/v1/goods/list?${queryString}`
|
|
|
|
|
else
|
|
|
|
|
url = `${host}/yjearth4.0/api/v1/goods/list?${queryString}`
|
|
|
|
|
fetch(url, {
|
|
|
|
|
method: 'get',
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
"token": getToken(),
|
|
|
|
|
"Authorization": "Bearer " + getToken(),
|
|
|
|
|
}
|
|
|
|
|
}).then((response) => {
|
|
|
|
|
if (response.status === 200) {
|
|
|
|
|
response.json().then((data) => {
|
|
|
|
|
if (data.code === 200 || data.code === 0) {
|
|
|
|
|
if (!that._DialogObject || !that._DialogObject._element || !that._DialogObject._element.content || !attributeElm) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
let paginationElm = attributeElm.getElementsByClassName('pagination')[0]
|
|
|
|
|
let table = that._DialogObject._element.content.getElementsByClassName('goods-table')[0]
|
|
|
|
|
let tableContent = table.getElementsByClassName('table-body')[0]
|
|
|
|
|
tableContent.innerHTML = ''
|
|
|
|
|
if (data.rows) {
|
|
|
|
|
data.data = {
|
|
|
|
|
list: [...data.rows],
|
|
|
|
|
total: data.total
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (data.data) {
|
|
|
|
|
if (data.data.list && data.data.list.length > 0) {
|
|
|
|
|
that._allGoodsList = data.data.list
|
|
|
|
|
// generatePagination(paginationElm, data.data.total, goodsPageSize, 1, (pageIndex) => {
|
|
|
|
|
// that.goodsSelect(pageIndex)
|
|
|
|
|
// });
|
|
|
|
|
for (let i = that.attributeGoods.length - 1; i >= 0; i--) {
|
|
|
|
|
let flag = false
|
|
|
|
|
for (let m = 0; m < data.data.list.length; m++) {
|
|
|
|
|
if ('ID' in data.data.list[m]) {
|
|
|
|
|
if (data.data.list[m].ID === that.attributeGoods[i].ID) {
|
|
|
|
|
flag = true
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else if ('id' in data.data.list[m]) {
|
|
|
|
|
if (data.data.list[m].id === that.attributeGoods[i].id) {
|
|
|
|
|
flag = true
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (!flag) {
|
|
|
|
|
that.attributeGoods.splice(i, 1)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
table.getElementsByClassName('table-empty')[0].style.display = 'none'
|
|
|
|
|
tableContent.style.display = 'block'
|
|
|
|
|
tableContent.style.maxHeight = '150px'
|
|
|
|
|
for (let i = 0; i < data.data.list.length; i++) {
|
|
|
|
|
let tr = `
|
|
|
|
|
<div class="tr">
|
|
|
|
|
<div class="td" style="width: 60px; flex: 0 60px;min-width: 60px;">
|
|
|
|
|
${i + 1}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="td" style="flex: 0 0 280px;">${data.data.list[i].name}</div>
|
|
|
|
|
<div class="td"><input class="input" type="number" title="" min="0" max="999999999"></div>
|
|
|
|
|
</div>`
|
|
|
|
|
let trElm = document.createRange().createContextualFragment(tr)
|
|
|
|
|
let inputElm = trElm.querySelector('input[type="number"]')
|
|
|
|
|
inputElm.value = 0
|
|
|
|
|
for (let m = 0; m < that.attributeGoods.length; m++) {
|
|
|
|
|
if ('ID' in data.data.list[i]) {
|
|
|
|
|
if (data.data.list[i].ID === that.attributeGoods[m].ID) {
|
|
|
|
|
inputElm.value = that.attributeGoods[m].cnt
|
|
|
|
|
that.attributeGoods[m].name = data.data.list[i].name
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else if ('id' in data.data.list[i]) {
|
|
|
|
|
if (data.data.list[i].id === that.attributeGoods[m].id) {
|
|
|
|
|
inputElm.value = that.attributeGoods[m].cnt
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
inputElm.addEventListener('blur', (e) => {
|
|
|
|
|
let value = Number(e.target.value)
|
|
|
|
|
inputElm.value = value
|
|
|
|
|
let flag = false
|
|
|
|
|
for (let m = that.attributeGoods.length - 1; m >= 0; m--) {
|
|
|
|
|
if ('ID' in data.data.list[i]) {
|
|
|
|
|
if (data.data.list[i].ID === that.attributeGoods[m].ID) {
|
|
|
|
|
flag = true
|
|
|
|
|
if (value) {
|
|
|
|
|
that.attributeGoods[m].cnt = value
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
that.attributeGoods.splice(m, 1)
|
|
|
|
|
}
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else if ('id' in data.data.list[i]) {
|
|
|
|
|
if (data.data.list[i].id === that.attributeGoods[m].id) {
|
|
|
|
|
flag = true
|
|
|
|
|
if (value) {
|
|
|
|
|
that.attributeGoods[m].cnt = value
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
that.attributeGoods.splice(m, 1)
|
|
|
|
|
}
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (!flag) {
|
|
|
|
|
if (!value) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
let item = {
|
|
|
|
|
name: data.data.list[i].name,
|
|
|
|
|
cnt: value
|
|
|
|
|
}
|
|
|
|
|
if ('ID' in data.data.list[i]) {
|
|
|
|
|
item.ID = data.data.list[i].ID
|
|
|
|
|
}
|
|
|
|
|
else if ('id' in data.data.list[i]) {
|
|
|
|
|
item.id = data.data.list[i].id
|
|
|
|
|
}
|
|
|
|
|
that.attributeGoods.push({ ...item })
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
inputElm.addEventListener('input', (e) => {
|
|
|
|
|
if (e.data && isNaN(Number(e.data))) {
|
|
|
|
|
if (e.data != '.') {
|
|
|
|
|
inputElm.value = Number(inputElm.value)
|
|
|
|
|
}
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
let value = Number(e.target.value)
|
|
|
|
|
if ((e.target.max) && value > Number(e.target.max)) {
|
|
|
|
|
value = Number(e.target.max)
|
|
|
|
|
}
|
|
|
|
|
if ((e.target.min) && value < Number(e.target.min)) {
|
|
|
|
|
value = Number(e.target.min)
|
|
|
|
|
}
|
|
|
|
|
inputElm.value = value
|
|
|
|
|
let flag = false
|
|
|
|
|
for (let m = that.attributeGoods.length - 1; m >= 0; m--) {
|
|
|
|
|
if ('ID' in data.data.list[i]) {
|
|
|
|
|
if (data.data.list[i].ID === that.attributeGoods[m].ID) {
|
|
|
|
|
flag = true
|
|
|
|
|
if (value) {
|
|
|
|
|
that.attributeGoods[m].cnt = value
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
that.attributeGoods.splice(m, 1)
|
|
|
|
|
}
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else if ('id' in data.data.list[i]) {
|
|
|
|
|
if (data.data.list[i].id === that.attributeGoods[m].id) {
|
|
|
|
|
flag = true
|
|
|
|
|
if (value) {
|
|
|
|
|
that.attributeGoods[m].cnt = value
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
that.attributeGoods.splice(m, 1)
|
|
|
|
|
}
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (!flag) {
|
|
|
|
|
if (!value) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
let item = {
|
|
|
|
|
name: data.data.list[i].name,
|
|
|
|
|
cnt: value
|
|
|
|
|
}
|
|
|
|
|
if ('ID' in data.data.list[i]) {
|
|
|
|
|
item.ID = data.data.list[i].ID
|
|
|
|
|
}
|
|
|
|
|
else if ('id' in data.data.list[i]) {
|
|
|
|
|
item.id = data.data.list[i].id
|
|
|
|
|
}
|
|
|
|
|
that.attributeGoods.push({ ...item })
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
tableContent.appendChild(trElm)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (data.data && data.data.total) {
|
|
|
|
|
// generatePagination(paginationElm, data.data.total, goodsPageSize, page, (pageIndex) => {
|
|
|
|
|
// that.goodsSelect(pageIndex)
|
|
|
|
|
// });
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
// generatePagination(paginationElm, 1, goodsPageSize, 1);
|
|
|
|
|
table.getElementsByClassName('table-empty')[0].style.display = 'flex'
|
|
|
|
|
tableContent.style.display = 'none'
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
console.error(data.message)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function goodsFilter() {
|
|
|
|
|
let list = []
|
|
|
|
|
if (that._allGoodsList && that._allGoodsList.length) {
|
|
|
|
|
let keywords = that._DialogObject._element.content.getElementsByClassName('goods-select-input')[0].value
|
|
|
|
|
list = that._allGoodsList.filter(function (item) {
|
|
|
|
|
return (item.name.indexOf(keywords) !== -1);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
let table = that._DialogObject._element.content.getElementsByClassName('goods-table')[0]
|
|
|
|
|
let tableContent = table.getElementsByClassName('table-body')[0]
|
|
|
|
|
tableContent.innerHTML = ''
|
|
|
|
|
if (list.length > 0) {
|
|
|
|
|
// generatePagination(paginationElm, data.data.total, goodsPageSize, 1, (pageIndex) => {
|
|
|
|
|
// that.goodsSelect(pageIndex)
|
|
|
|
|
// });
|
|
|
|
|
table.getElementsByClassName('table-empty')[0].style.display = 'none'
|
|
|
|
|
tableContent.style.display = 'block'
|
|
|
|
|
tableContent.style.maxHeight = '150px'
|
|
|
|
|
for (let i = 0; i < list.length; i++) {
|
|
|
|
|
let tr = `
|
|
|
|
|
<div class="tr">
|
|
|
|
|
<div class="td" style="width: 60px; flex: 0 60px;min-width: 60px;">
|
|
|
|
|
${i + 1}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="td" style="flex: 0 0 280px;">${list[i].name}</div>
|
|
|
|
|
<div class="td"><input class="input" type="number" title="" min="0" max="999999999"></div>
|
|
|
|
|
</div>`
|
|
|
|
|
let trElm = document.createRange().createContextualFragment(tr)
|
|
|
|
|
let inputElm = trElm.querySelector('input[type="number"]')
|
|
|
|
|
inputElm.value = 0
|
|
|
|
|
for (let m = 0; m < that.attributeGoods.length; m++) {
|
|
|
|
|
if ('ID' in list[i]) {
|
|
|
|
|
if (list[i].ID === that.attributeGoods[m].ID) {
|
|
|
|
|
inputElm.value = that.attributeGoods[m].cnt
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else if ('id' in list[i]) {
|
|
|
|
|
if (list[i].id === that.attributeGoods[m].id) {
|
|
|
|
|
inputElm.value = that.attributeGoods[m].cnt
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
inputElm.addEventListener('blur', (e) => {
|
|
|
|
|
let value = Number(e.target.value)
|
|
|
|
|
inputElm.value = value
|
|
|
|
|
let flag = false
|
|
|
|
|
for (let m = that.attributeGoods.length - 1; m >= 0; m--) {
|
|
|
|
|
if ('ID' in list[i]) {
|
|
|
|
|
if (list[i].ID === that.attributeGoods[m].ID) {
|
|
|
|
|
flag = true
|
|
|
|
|
if (value) {
|
|
|
|
|
that.attributeGoods[m].cnt = value
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
that.attributeGoods.splice(m, 1)
|
|
|
|
|
}
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else if ('id' in list[i]) {
|
|
|
|
|
if (list[i].id === that.attributeGoods[m].id) {
|
|
|
|
|
flag = true
|
|
|
|
|
if (value) {
|
|
|
|
|
that.attributeGoods[m].cnt = value
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
that.attributeGoods.splice(m, 1)
|
|
|
|
|
}
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (!flag) {
|
|
|
|
|
if (!value) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
let item = {
|
|
|
|
|
name: list[i].name,
|
|
|
|
|
cnt: value
|
|
|
|
|
}
|
|
|
|
|
if ('ID' in list[i]) {
|
|
|
|
|
item.ID = list[i].ID
|
|
|
|
|
}
|
|
|
|
|
else if ('id' in list[i]) {
|
|
|
|
|
item.id = list[i].id
|
|
|
|
|
}
|
|
|
|
|
that.attributeGoods.push({ ...item })
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
inputElm.addEventListener('input', (e) => {
|
|
|
|
|
if (e.data && isNaN(Number(e.data))) {
|
|
|
|
|
if (e.data != '.') {
|
|
|
|
|
inputElm.value = Number(inputElm.value)
|
|
|
|
|
}
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
let value = Number(e.target.value)
|
|
|
|
|
if ((e.target.max) && value > Number(e.target.max)) {
|
|
|
|
|
value = Number(e.target.max)
|
|
|
|
|
}
|
|
|
|
|
if ((e.target.min) && value < Number(e.target.min)) {
|
|
|
|
|
value = Number(e.target.min)
|
|
|
|
|
}
|
|
|
|
|
inputElm.value = value
|
|
|
|
|
let flag = false
|
|
|
|
|
for (let m = that.attributeGoods.length - 1; m >= 0; m--) {
|
|
|
|
|
if ('ID' in list[i]) {
|
|
|
|
|
if (list[i].ID === that.attributeGoods[m].ID) {
|
|
|
|
|
flag = true
|
|
|
|
|
if (value) {
|
|
|
|
|
that.attributeGoods[m].cnt = value
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
that.attributeGoods.splice(m, 1)
|
|
|
|
|
}
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else if ('id' in list[i]) {
|
|
|
|
|
if (list[i].id === that.attributeGoods[m].id) {
|
|
|
|
|
flag = true
|
|
|
|
|
if (value) {
|
|
|
|
|
that.attributeGoods[m].cnt = value
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
that.attributeGoods.splice(m, 1)
|
|
|
|
|
}
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (!flag) {
|
|
|
|
|
if (!value) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
let item = {
|
|
|
|
|
name: list[i].name,
|
|
|
|
|
cnt: value
|
|
|
|
|
}
|
|
|
|
|
if ('ID' in list[i]) {
|
|
|
|
|
item.ID = list[i].ID
|
|
|
|
|
}
|
|
|
|
|
else if ('id' in list[i]) {
|
|
|
|
|
item.id = list[i].id
|
|
|
|
|
}
|
|
|
|
|
that.attributeGoods.push({ ...item })
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
tableContent.appendChild(trElm)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// else {
|
|
|
|
|
// table.getElementsByClassName('table-empty')[0].style.display = 'flex'
|
|
|
|
|
// tableContent.style.display = 'none'
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
table.getElementsByClassName('table-empty')[0].style.display = 'flex'
|
|
|
|
|
tableContent.style.display = 'none'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return `<div class="attribute">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col attribute-select-box">
|
|
|
|
|
<span class="label" style="line-height: 32px;">内容类型</span>
|
|
|
|
|
<div class="input input-select attribute-select"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="attribute-content attribute-content-richText">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col">
|
|
|
|
|
<span class="label">编辑内容</span>
|
|
|
|
|
<button @click="openRichTextEditor">打开文本编辑器</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row attribute-content attribute-content-link">
|
|
|
|
|
<div class="col">
|
|
|
|
|
<span class="label">添加链接</span>
|
|
|
|
|
<div style="flex: 1;position: relative;">
|
|
|
|
|
<input class="input link_add" type="text">
|
|
|
|
|
<i class="link_add_btn" @click="_addLink"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="attribute-content attribute-content-link">
|
|
|
|
|
<div class="table">
|
|
|
|
|
<div class="table-head">
|
|
|
|
|
<div class="tr">
|
|
|
|
|
<div class="th">名称</div>
|
|
|
|
|
<div class="th">链接</div>
|
|
|
|
|
<div class="th">操作</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="table-body">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="table-empty">
|
|
|
|
|
<div class="empty-img"></div>
|
|
|
|
|
<p>暂无数据</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="attribute-content attribute-content-camera">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col">
|
|
|
|
|
<span class="label">编辑内容</span>
|
|
|
|
|
<input class="input" type="text" @model="cameraName" style="width: 100px;">
|
|
|
|
|
<button class="select btn" @click="cameraSelect">搜索</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="table camera-table">
|
|
|
|
|
<div class="table-head">
|
|
|
|
|
<div class="tr">
|
|
|
|
|
<div class="th">操作</div>
|
|
|
|
|
<div class="th">设备名称</div>
|
|
|
|
|
<div class="th" style="width: 80px; flex: 0 80px;min-width: 80px;">设备类型</div>
|
|
|
|
|
<div class="th" style="width: 126px; flex: 0 126px;min-width: 126px;">设备IP</div>
|
|
|
|
|
<div class="th" style="width: 80px; flex: 0 80px;min-width: 80px;">设备端口</div>
|
|
|
|
|
<div class="th" style="width: 80px; flex: 0 80px;min-width: 80px;">用户名</div>
|
|
|
|
|
<div class="th">密码</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="table-body" style="display:none;">
|
|
|
|
|
<div class="tr">
|
|
|
|
|
<div class="td">
|
|
|
|
|
<input type="checkbox" value="2">
|
|
|
|
|
<span>绑定</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="td">设备名称</div>
|
|
|
|
|
<div class="td">设备类型</div>
|
|
|
|
|
<div class="td">设备IP</div>
|
|
|
|
|
<div class="td">设备端口</div>
|
|
|
|
|
<div class="td">用户名</div>
|
|
|
|
|
<div class="td">密码</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="table-empty">
|
|
|
|
|
<div class="empty-img"></div>
|
|
|
|
|
<p>暂无数据</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class=""row>
|
|
|
|
|
<ul class="pagination"></ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="attribute-content attribute-content-isc">
|
|
|
|
|
<!-- <div class="row">
|
|
|
|
|
<div class="col">
|
|
|
|
|
<span class="label">编辑内容</span>
|
|
|
|
|
<input class="input" type="text" @model="ISCName" style="width: 100px;">
|
|
|
|
|
<button class="select btn" @click="ISCSelect">搜索</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
<div>
|
|
|
|
|
<div class="table isc-table">
|
|
|
|
|
<div class="table-head">
|
|
|
|
|
<div class="tr">
|
|
|
|
|
<div class="th" style="width: 74px; flex: 0 74px;min-width: 74px;">操作</div>
|
|
|
|
|
<div class="th">设备名称</div>
|
|
|
|
|
<div class="th" style="width: 180px; flex: 0 180px; min-width: 180px;">设备状态</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="table-body" style="display:none;">
|
|
|
|
|
<div class="tr">
|
|
|
|
|
<div class="td">
|
|
|
|
|
<input type="checkbox" value="2">
|
|
|
|
|
<span>绑定</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="td">设备名称</div>
|
|
|
|
|
<div class="td" style="width: 180px; flex: 0 180px; min-width: 180px;">设备状态</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="table-empty">
|
|
|
|
|
<div class="empty-img"></div>
|
|
|
|
|
<p>暂无数据</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class=""row>
|
|
|
|
|
<ul class="pagination"></ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row attribute-content attribute-content-vr">
|
|
|
|
|
<div class="col">
|
|
|
|
|
<span class="label">添加链接</span>
|
|
|
|
|
<div style="flex: 1;position: relative;">
|
|
|
|
|
<input class="input vr_add" type="text">
|
|
|
|
|
<i class="vr_add_btn" @click="_addRr"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="attribute-content attribute-content-vr">
|
|
|
|
|
<div class="table">
|
|
|
|
|
<div class="table-head">
|
|
|
|
|
<div class="tr">
|
|
|
|
|
<div class="th">名称</div>
|
|
|
|
|
<div class="th">链接</div>
|
|
|
|
|
<div class="th">操作</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="table-body">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="table-empty">
|
|
|
|
|
<div class="empty-img"></div>
|
|
|
|
|
<p>暂无数据</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="attribute-content attribute-content-goods">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col">
|
|
|
|
|
<span class="label">编辑内容</span>
|
|
|
|
|
<input class="input goods-select-input" type="text" style="width: 180px;margin-right: 10px;">
|
|
|
|
|
<button class="select btn" @click="goodsFilter">搜索</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="table goods-table">
|
|
|
|
|
<div class="table-head">
|
|
|
|
|
<div class="tr">
|
|
|
|
|
<div class="th" style="width: 60px; flex: 0 60px;min-width: 60px;">序号</div>
|
|
|
|
|
<div class="th" style="flex: 0 0 280px;">名称</div>
|
|
|
|
|
<div class="th">数量</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="table-body" style="display:none;">
|
|
|
|
|
<div class="tr">
|
|
|
|
|
<div class="td" style="width: 60px; flex: 0 60px;min-width: 60px;">序号</div>
|
|
|
|
|
<div class="td" style="flex: 0 0 280px;">名称</div>
|
|
|
|
|
<div class="td">数量</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="table-empty">
|
|
|
|
|
<div class="empty-img"></div>
|
|
|
|
|
<p>暂无数据</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>`
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function labelStyleElm1(that) {
|
|
|
|
|
return `
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col">
|
|
|
|
|
<span class="label">标注开关</span>
|
|
|
|
|
<input class="btn-switch" type="checkbox" @model="labelShow">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col" style="flex: 0 0 114px;">
|
|
|
|
|
<span class="label">字体颜色</span>
|
|
|
|
|
<div class="labelColor"></div>
|
|
|
|
|
</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">
|
|
|
|
|
<span class="unit">px</span>
|
|
|
|
|
<span class="arrow"></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col" style="flex: 0 0 114px;">
|
|
|
|
|
<span class="label">视野缩放</span>
|
|
|
|
|
<input class="btn-switch" type="checkbox" @model="labelScaleByDistance">
|
|
|
|
|
</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="labelNear">
|
|
|
|
|
<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="labelFar">
|
|
|
|
|
<span class="unit">m</span>
|
|
|
|
|
<span class="arrow"></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`
|
|
|
|
|
}
|
|
|
|
|
function labelStyleElm2(that) {
|
|
|
|
|
return `
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col">
|
|
|
|
|
<span class="label">引线颜色</span>
|
|
|
|
|
<div class="labelLineColor"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col">
|
|
|
|
|
<span class="label">背景颜色</span>
|
|
|
|
|
<div class="labelBackgroundColorStart" style="margin-right: 10px;"></div>
|
|
|
|
|
<div class="labelBackgroundColorEnd"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col">
|
|
|
|
|
<span class="label">引线宽度</span>
|
|
|
|
|
<div class="input-number input-number-unit-2">
|
|
|
|
|
<input class="input" type="number" title="" min="1" max="999" @model="labelLineWidth">
|
|
|
|
|
<span class="unit">px</span>
|
|
|
|
|
<span class="arrow"></span>
|
|
|
|
|
</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" max="999" @model="labelPixelOffset">
|
|
|
|
|
<span class="unit">px</span>
|
|
|
|
|
<span class="arrow"></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export { attributeElm, labelStyleElm1, labelStyleElm2 }
|
