7 changed files with 3359 additions and 1351 deletions
@ -0,0 +1,521 @@ |
|||||
|
<template> |
||||
|
<div class="create-model-modal" v-if="winVisible"> |
||||
|
<Window |
||||
|
:title="title" |
||||
|
@cancel="cancel" |
||||
|
@ok="ok" |
||||
|
:width="width" |
||||
|
:minWidth="600" |
||||
|
:height="height" |
||||
|
:left="left" |
||||
|
:top="top" |
||||
|
:floatright="false" |
||||
|
:footervisible="true" |
||||
|
v-show="!creating" |
||||
|
:expand="expand" |
||||
|
> |
||||
|
<div class="object-box"> |
||||
|
<div style="display: flex" class="custom-item"> |
||||
|
<label class="custom-label">监控点名称:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<input v-model="name" class="name-input" style="height: 90%; width: 100%" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex" class="custom-item"> |
||||
|
<label class="custom-label">所属区域:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<XbsjSelect id="area-select" title="name" :list="areaList" v-model:value="selectArea" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex" class="custom-item"> |
||||
|
<label class="custom-label">像素大小:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<a-slider v-model:value="minimumPixelSize" :min="0" :max="256" :step="1" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex" class="custom-item"> |
||||
|
<label class="custom-label">经纬度:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<input v-model="LngLatHeight[0]" type="number" class="xyz-input" /> |
||||
|
<input v-model="LngLatHeight[1]" type="number" class="xyz-input y-margin" /> |
||||
|
<input v-model="LngLatHeight[2]" type="number" class="xyz-input" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex" class="custom-item"> |
||||
|
<label class="custom-label">旋转:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<input v-model="rotation[0]" class="xyz-input" type="number" /> |
||||
|
<input v-model="rotation[1]" class="xyz-input y-margin" type="number" /> |
||||
|
<input v-model="rotation[2]" class="xyz-input" type="number" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex" class="custom-item"> |
||||
|
<label class="custom-label">缩放:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<xbsjScale v-model:scale="scale" style="height: 90%; width: 100%"></xbsjScale> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex; align-items: center; justify-content: center" class="custom-item"> |
||||
|
<button |
||||
|
@click="modelState('creating')" |
||||
|
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']" |
||||
|
:disabled="creating" |
||||
|
style="width: 20%" |
||||
|
> |
||||
|
拾取 |
||||
|
</button> |
||||
|
<button |
||||
|
@click="currentModel.positionEditing = true" |
||||
|
:class="['xbsj-button', 'edit-model-btn', !currentModel || positionEditing ? 'edit-model-btn-disable' : '']" |
||||
|
:disabled="creating" |
||||
|
style="width: 20%" |
||||
|
> |
||||
|
移动 |
||||
|
</button> |
||||
|
<button |
||||
|
@click="modelState('rotationEditing')" |
||||
|
:class="['xbsj-button', 'edit-model-btn', !currentModel || rotationEditing ? 'edit-model-btn-disable' : '']" |
||||
|
:disabled="rotationEditing" |
||||
|
style="width: 20%" |
||||
|
> |
||||
|
旋转 |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="Mask"></div> |
||||
|
</Window> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { onMounted, nextTick, defineComponent, ref, getCurrentInstance, computed } from 'vue'; |
||||
|
import xbsjScale from '/@/components/earthMap/components/xbsjScale.vue'; |
||||
|
import XbsjSelect from '/@/components/earthMap/components/XbsjSelect.vue'; |
||||
|
import XbsjColorButton from '/@/components/earthMap/components/XbsjColorButton.vue'; |
||||
|
import upload from '/@/components/earthMap/components/upload.vue'; |
||||
|
import Window from '@/components/earthMap/components/Window.vue'; |
||||
|
import { defHttp } from '/@/utils/http/axios'; |
||||
|
import { useMessage } from '/@/hooks/web/useMessage'; |
||||
|
import $ from 'jquery'; |
||||
|
|
||||
|
export default defineComponent({ |
||||
|
name: 'AddMonitorPointCom', |
||||
|
components: { |
||||
|
xbsjScale, |
||||
|
XbsjSelect, |
||||
|
upload, |
||||
|
XbsjColorButton, |
||||
|
Window, |
||||
|
}, |
||||
|
props: { |
||||
|
title: { |
||||
|
type: String, |
||||
|
default: '添加监控点', |
||||
|
}, |
||||
|
}, |
||||
|
setup() { |
||||
|
const { proxy }: any = getCurrentInstance(); |
||||
|
const { createMessage } = useMessage(); |
||||
|
// 宽高 |
||||
|
let widthCoefficient = ref(0.3); |
||||
|
let heightCoefficient = ref(0.5); |
||||
|
// 计算弹窗宽高定位 |
||||
|
const width = computed(() => { |
||||
|
return window.outerWidth * widthCoefficient.value; |
||||
|
}); |
||||
|
const height = computed(() => { |
||||
|
return window.outerHeight * heightCoefficient.value; |
||||
|
}); |
||||
|
const top = computed(() => { |
||||
|
return window.outerHeight * ((1.0 - heightCoefficient.value - 0.15) / 2); |
||||
|
}); |
||||
|
const left = computed(() => { |
||||
|
return (window.outerWidth * (1.0 - widthCoefficient.value)) / 2; |
||||
|
}); |
||||
|
// 窗口显示或隐藏 |
||||
|
let winVisible = ref(true); |
||||
|
// 当前模型 |
||||
|
let currentModel: any = ref(null); |
||||
|
// 是否更新模型 |
||||
|
let isUpdateModel = ref(false); |
||||
|
// 取消还原数据 |
||||
|
let revert = ref(null); |
||||
|
// 监控点名称 |
||||
|
let name = ref(''); |
||||
|
// 所属区域列表 |
||||
|
let areaList = ref([]); |
||||
|
// 选中所属区域 |
||||
|
let selectArea: any = ref(null); |
||||
|
// 像素大小 |
||||
|
let minimumPixelSize = ref(80); |
||||
|
// 俯仰角度 |
||||
|
let LngLatHeight = ref([0, 0, 0]); |
||||
|
// 旋转角度 |
||||
|
let rotation = ref([0, 0, 0]); |
||||
|
// 开启旋转辅助 |
||||
|
let rotationEditing = ref(false); |
||||
|
// 开启移动辅助 |
||||
|
let positionEditing = ref(false); |
||||
|
// 缩放 |
||||
|
let scale = ref([1, 1, 1]); |
||||
|
// 是否跟随鼠标状态 |
||||
|
let creating = ref(false); |
||||
|
// 是否展开表单项 |
||||
|
let expand = ref(true); |
||||
|
// 提交对象 |
||||
|
let submitObject: any = ref({}); |
||||
|
// 获取区域数据 |
||||
|
function getAreas() { |
||||
|
const submitData: any = { |
||||
|
pageNo: 1, |
||||
|
pageSize: 999, |
||||
|
}; |
||||
|
return defHttp |
||||
|
.get( |
||||
|
{ |
||||
|
url: '/military/msMapLine/list', |
||||
|
params: submitData, |
||||
|
}, |
||||
|
{ isTransformResponse: false } |
||||
|
) |
||||
|
.then((res) => { |
||||
|
if (res.success) { |
||||
|
areaList.value = res.result.records; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
// 取消 |
||||
|
function cancel() { |
||||
|
if (isUpdateModel.value) { |
||||
|
// 调用更新时的取消 |
||||
|
updateClose(); |
||||
|
} else { |
||||
|
// 调用创建时的取消 |
||||
|
close(); |
||||
|
} |
||||
|
//通过父组件v-if 关闭本组件 |
||||
|
proxy.$parent.addMonitorPointComShow = false; |
||||
|
} |
||||
|
// 更新时的取消方法 |
||||
|
function updateClose() { |
||||
|
// 还原数据 |
||||
|
if (currentModel.value) { |
||||
|
currentModel.value.xbsjFromJSON(revert.value); |
||||
|
currentModel.value.editing = false; |
||||
|
currentModel.value.positionEditing = false; |
||||
|
currentModel.value.rotationEditing = false; |
||||
|
} |
||||
|
} |
||||
|
// 创建时的取消方法 |
||||
|
function close() { |
||||
|
// 模型不为空时，销毁模型 |
||||
|
if (currentModel.value) { |
||||
|
if (currentModel.value.addViewShedReturn) { |
||||
|
window.$earth.czm.viewer.entities.remove(currentModel.value.addViewShedReturn); |
||||
|
} |
||||
|
currentModel.value.editing = false; |
||||
|
currentModel.value.destroy(); |
||||
|
} |
||||
|
} |
||||
|
// 确认 |
||||
|
function ok() { |
||||
|
// 校验表单项 |
||||
|
if (name.value == null || name.value.length <= 0) { |
||||
|
createMessage.warning('请填写监控点名称', 2); |
||||
|
return; |
||||
|
} else if (selectArea.value == null || selectArea.value.id <= 0) { |
||||
|
// 非区域类型，区域效验 |
||||
|
createMessage.warning('请选择所属区域', 2); |
||||
|
return; |
||||
|
} |
||||
|
// 关闭编辑状态 |
||||
|
currentModel.value.editing = false; |
||||
|
// 提交数据 |
||||
|
submitData(); |
||||
|
} |
||||
|
// 提交数据方法 |
||||
|
function submitData() { |
||||
|
// 查找最后一个/所在位置 |
||||
|
let startNum = currentModel.value.url.lastIndexOf('/') + 1; |
||||
|
// 获取出模型名称 监控点 |
||||
|
let modelName = ''; |
||||
|
if (startNum > -1) { |
||||
|
modelName = currentModel.value.url.substring(startNum, currentModel.value.url.length); |
||||
|
} |
||||
|
submitObject.value = { |
||||
|
id: null, |
||||
|
createBy: null, |
||||
|
createTime: null, |
||||
|
updateBy: null, |
||||
|
updateTime: null, |
||||
|
sitecode: null, |
||||
|
sitename: name.value, // 名称 |
||||
|
longitude: LngLatHeight.value[0], // x坐标 |
||||
|
latitude: LngLatHeight.value[1], // y坐标 |
||||
|
height: LngLatHeight.value[2], // z坐标 |
||||
|
yaw: rotation.value[0], // x旋转 |
||||
|
pitch: rotation.value[1], // y旋转 |
||||
|
roll: rotation.value[2], // z旋转 |
||||
|
lineId: selectArea.value.id ? selectArea.value.id : null, // 区域id |
||||
|
state: 1, // 数据状态 |
||||
|
modelUrl: modelName, // 模型url地址 |
||||
|
scale: currentModel.value.scale ? currentModel.value.scale : 1, // 整体缩放比例 默认1 |
||||
|
xyzScale: scale.value.toString(), // xyz缩放比例 |
||||
|
minimumPixelSize: minimumPixelSize.value, // 最小像素大小 |
||||
|
}; |
||||
|
let request: any = null; |
||||
|
// 提交地址 |
||||
|
let url = ''; |
||||
|
|
||||
|
if (isUpdateModel.value) { |
||||
|
// 设置url为编辑地址，设置方法为put 设置记录id |
||||
|
url = '/military/camera/site/edit'; |
||||
|
submitObject.value.id = currentModel.value.customProp; |
||||
|
request = defHttp.put({ url: url, params: submitObject.value }, { isTransformResponse: false }); |
||||
|
} else { |
||||
|
// 设置url为新增地址，设置方法为post |
||||
|
url = '/military/camera/site/add'; |
||||
|
request = defHttp.post({ url: url, params: submitObject.value }, { isTransformResponse: false }); |
||||
|
} |
||||
|
// 提交数据，等待回复 |
||||
|
request |
||||
|
.then(function (response) { |
||||
|
// 数据回复，并成功 |
||||
|
if (response.success) { |
||||
|
// 设置显示节点的ref为 node_ref |
||||
|
const lineId = 'node_' + selectArea.value.id; |
||||
|
// 当前处于新增状态 |
||||
|
if (!isUpdateModel.value) { |
||||
|
// 设置父节点 |
||||
|
const parent = window.$earth.sceneTree.$refs[lineId].children[0]; |
||||
|
// 真实的叶子节点 |
||||
|
let node = new window.XE.SceneTree.Leaf(currentModel.value); |
||||
|
// 设置叶子节点的ref |
||||
|
node.ref = response.result; |
||||
|
// 将id存入customProp属性中 |
||||
|
currentModel.value.customProp = response.result; |
||||
|
// 设置树中显示文 |
||||
|
node.title = name.value; |
||||
|
// 设置节点的name，用来存储,区域id。name属性不在模型树上显示，故而只用作数据储存功能 |
||||
|
node.name = selectArea.value.id; |
||||
|
// 将此节点添加到树中 |
||||
|
window.$earth.sceneTree.root.children.push(node); |
||||
|
// 移除真实叶子节点显示的dom |
||||
|
nextTick(() => { |
||||
|
$('#earthContainer>div>div>div:nth-child(5)') |
||||
|
.children('div') |
||||
|
.eq(1) |
||||
|
.children() |
||||
|
.eq(0) |
||||
|
.children() |
||||
|
.eq(0) |
||||
|
.children() |
||||
|
.each((index, element) => { |
||||
|
if (index <= 1) { |
||||
|
return; |
||||
|
} |
||||
|
const paddingLeft = $(element).children().eq(0).css('padding-left'); |
||||
|
if (paddingLeft === '10px') { |
||||
|
$(element).css('display', 'none'); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
// 虚假的节点 |
||||
|
const shamNode = { |
||||
|
ref: 'node_' + response.result, // 设置节点ref |
||||
|
title: name.value, // 设置节点显示文字 |
||||
|
expand: false, |
||||
|
children: [], |
||||
|
}; |
||||
|
// 树中加入并显示该节点 |
||||
|
parent.children.push(shamNode); |
||||
|
// 提示用户 |
||||
|
createMessage.success('添加成功！', 2); |
||||
|
} else { |
||||
|
//当前处于更新状态 |
||||
|
// 获取更新的虚假节点 |
||||
|
const shamNode = window.$earth.sceneTree.$refs['node_' + submitObject.value.id]; |
||||
|
// 更新虚假节点的显示文字 |
||||
|
shamNode.title = name.value; |
||||
|
// 设置name属性 |
||||
|
currentModel.value.name = name.value; |
||||
|
moveNode('Model'); |
||||
|
// 提示用户 |
||||
|
createMessage.success('修改成功！', 2); |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
.then(function () { |
||||
|
finish(); |
||||
|
}); |
||||
|
} |
||||
|
// 提交完成 |
||||
|
function finish() { |
||||
|
if (currentModel.value) { |
||||
|
// 释放当前模型的引用 |
||||
|
currentModel.value.rotationEditing = false; |
||||
|
currentModel.value.positionEditing = false; |
||||
|
currentModel.value = null; |
||||
|
} |
||||
|
//通过父组件v-if 关闭本组件 |
||||
|
proxy.$parent.addMonitorPointComShow = false; |
||||
|
} |
||||
|
// 修改属性状态,取反 |
||||
|
function modelState(propName) { |
||||
|
proxy[propName] = !proxy[propName]; |
||||
|
} |
||||
|
// 添加监控点模型（监控杆） |
||||
|
function addModel() { |
||||
|
// 创建模型 |
||||
|
const model = new window.XE.Obj.Model(window.$earth); |
||||
|
// 设置视距 |
||||
|
model.distanceDisplayCondition = [1, 30000]; |
||||
|
// 设置模型地址 |
||||
|
model.url = window._CONFIG['domianURL'] + '/sys/common/static/dxgG.gltf'; |
||||
|
// 设置缩放倍数 |
||||
|
model.scale = 0.03; |
||||
|
// 绑定属性 |
||||
|
bindModelProps(model); |
||||
|
// 设备像素 |
||||
|
minimumPixelSize.value = 80; |
||||
|
return model; |
||||
|
} |
||||
|
// 绑定模型属性 |
||||
|
function bindModelProps(model) { |
||||
|
// 绑定位移 |
||||
|
model.disposers.push(window.XE.MVVM.bindPosition(proxy, 'LngLatHeight', model, 'xbsjPosition')); |
||||
|
// 绑定角度 |
||||
|
model.disposers.push(window.XE.MVVM.bindRotation(proxy, 'rotation', model, 'xbsjRotation')); |
||||
|
// 绑定缩放 |
||||
|
model.disposers.push(window.XE.MVVM.bind(proxy, 'scale', model, 'xbsjScale')); |
||||
|
// 绑定编辑状态 |
||||
|
model.disposers.push(window.XE.MVVM.bind(proxy, 'creating', model, 'creating')); |
||||
|
// 绑定旋转状态 |
||||
|
model.disposers.push(window.XE.MVVM.bind(proxy, 'rotationEditing', model, 'rotationEditing')); |
||||
|
// 绑定最小像素 |
||||
|
model.disposers.push(window.XE.MVVM.bind(proxy, 'minimumPixelSize', model, 'minimumPixelSize')); |
||||
|
} |
||||
|
// 移动节点 |
||||
|
function moveNode(type) { |
||||
|
if (!isUpdateModel.value) { |
||||
|
return false; |
||||
|
} |
||||
|
const newNodel = 'node_' + selectArea.value.id; |
||||
|
const moveAreaNode = window.$earth.sceneTree.$refs[newNodel] || window.$earth.sceneTree.$refs['nodeSecondary_' + selectArea.value.id]; |
||||
|
if (moveAreaNode) { |
||||
|
let moveNode = null; |
||||
|
if (type == 'Model') { |
||||
|
moveNode = moveAreaNode.children[0]; |
||||
|
} else if (type == 'ld') { |
||||
|
moveNode = moveAreaNode; |
||||
|
} else { |
||||
|
moveNode = moveAreaNode.children[2]; |
||||
|
} |
||||
|
} |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
// 设置当前状态为添加 |
||||
|
isUpdateModel.value = false; |
||||
|
// 获取区域数据 |
||||
|
getAreas().then(() => { |
||||
|
// 折叠面板 |
||||
|
expand.value = true; |
||||
|
// 创建并绑定模型 |
||||
|
currentModel.value = addModel(); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
return { |
||||
|
widthCoefficient, |
||||
|
heightCoefficient, |
||||
|
width, |
||||
|
height, |
||||
|
top, |
||||
|
left, |
||||
|
winVisible, |
||||
|
currentModel, |
||||
|
name, |
||||
|
areaList, |
||||
|
selectArea, |
||||
|
minimumPixelSize, |
||||
|
LngLatHeight, |
||||
|
rotation, |
||||
|
rotationEditing, |
||||
|
positionEditing, |
||||
|
scale, |
||||
|
creating, |
||||
|
expand, |
||||
|
getAreas, |
||||
|
bindModelProps, |
||||
|
modelState, |
||||
|
cancel, |
||||
|
ok, |
||||
|
}; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.object-box { |
||||
|
width: 100%; |
||||
|
height: 86%; |
||||
|
|
||||
|
label { |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
} |
||||
|
:deep(.custom-item-box > div > input) { |
||||
|
width: 45% !important; |
||||
|
margin-right: 0% !important; |
||||
|
} |
||||
|
:deep(.custom-label) { |
||||
|
width: 15% !important; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-end; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
:deep(.object-box .custom-item) { |
||||
|
height: 10%; |
||||
|
margin-top: 2%; |
||||
|
} |
||||
|
:deep(.custom-item-box) { |
||||
|
padding-left: 5% !important; |
||||
|
width: 80% !important; |
||||
|
} |
||||
|
.name-input { |
||||
|
height: 90%; |
||||
|
width: 100%; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
border-radius: 3px; |
||||
|
border: none; |
||||
|
color: #ddd; |
||||
|
padding: 5px; |
||||
|
outline: none; |
||||
|
} |
||||
|
.xyz-input { |
||||
|
height: 90%; |
||||
|
width: 30%; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
border-radius: 3px; |
||||
|
border: none; |
||||
|
color: #ddd; |
||||
|
padding: 5px; |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
.y-margin { |
||||
|
margin-left: 5%; |
||||
|
margin-right: 5%; |
||||
|
} |
||||
|
.edit-model-btn { |
||||
|
cursor: pointer; |
||||
|
line-height: 5%; |
||||
|
} |
||||
|
|
||||
|
.edit-model-btn-disable { |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,638 @@ |
|||||
|
<!-- |
||||
|
* @Author: Fuyuu 1805498209@qq.com |
||||
|
* @Date: 2024-01-10 15:19:50 |
||||
|
* @LastEditors: Fuyuu 1805498209@qq.com |
||||
|
* @LastEditTime: 2024-01-11 15:50:45 |
||||
|
* @FilePath: \dt-admin-pc-v2\src\components\earthMap\toolbar\AddWaveCom.vue |
||||
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE |
||||
|
--> |
||||
|
<template> |
||||
|
<div class="create-model-modal" v-if="winVisible"> |
||||
|
<Window |
||||
|
:title="title" |
||||
|
@cancel="cancel" |
||||
|
@ok="ok" |
||||
|
:width="width" |
||||
|
:minWidth="600" |
||||
|
:height="height" |
||||
|
:left="left" |
||||
|
:top="top" |
||||
|
:floatright="false" |
||||
|
:footervisible="true" |
||||
|
v-show="!creating" |
||||
|
:expand="expand" |
||||
|
> |
||||
|
<div class="object-box"> |
||||
|
<div style="display: flex" class="custom-item"> |
||||
|
<label class="custom-label">雷达名称:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<input v-model="name" class="name-input" style="height: 90%; width: 100%" @change="nameChange(currentModel)" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex" class="custom-item"> |
||||
|
<label class="custom-label">所属区域:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<XbsjSelect id="area-select" title="name" :list="areaList" v-model:value="selectArea" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex" class="custom-item"> |
||||
|
<label class="custom-label">主机设备:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<XbsjSelect title="deviceName" :list="hostDeviceList" v-model:value="selectHostDevice" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex" class="custom-item"> |
||||
|
<label class="custom-label">设备编码:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<input v-model="selectDeviceNum" class="name-input" style="height: 90%; width: 100%" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex; height: 20%" class="custom-item"> |
||||
|
<label class="custom-label">上传图标:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<div class="upload-box"> |
||||
|
<upload v-model:file="uploadFile" :pre-view-url="previewImgUrl" :isUpdateModel="isUpdateModel" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex" class="custom-item"> |
||||
|
<label class="custom-label">经纬度:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<!-- <XbsjLngLatHeight v-model="LngLatHeight" style="height: 90%; width: 100%"></XbsjLngLatHeight> --> |
||||
|
<input v-model="LngLatHeight[0]" type="number" class="xyz-input" /> |
||||
|
<input v-model="LngLatHeight[1]" type="number" class="xyz-input y-margin" /> |
||||
|
<input v-model="LngLatHeight[2]" type="number" class="xyz-input" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex" class="custom-item"> |
||||
|
<label class="custom-label">扫描颜色:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<XbsjColorButton style="height: 30px" v-model:color="radarColor"> </XbsjColorButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex" class="custom-item"> |
||||
|
<label class="custom-label">法线偏移角度:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<input v-model="radarShifting" type="number" class="xyz-input" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex" class="custom-item"> |
||||
|
<label class="custom-label">扫描范围:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<input v-model="radarRange" type="number" class="xyz-input" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex" class="custom-item"> |
||||
|
<label class="custom-label">扫描半径:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<input v-model="radarRadius" type="number" class="xyz-input" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex; justify-content: center" class="custom-item"> |
||||
|
<button |
||||
|
@click="modelState('creating')" |
||||
|
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']" |
||||
|
:disabled="creating" |
||||
|
style="width: 20%; display: flex; align-items: center; justify-content: center" |
||||
|
> |
||||
|
拾取 |
||||
|
</button> |
||||
|
<button |
||||
|
@click="currentModel.editing = true" |
||||
|
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']" |
||||
|
:disabled="creating" |
||||
|
style="width: 20%; display: flex; align-items: center; justify-content: center" |
||||
|
> |
||||
|
移动 |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</Window> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script lang="ts"> |
||||
|
import { onMounted, defineComponent, ref, getCurrentInstance, computed, watch } from 'vue'; |
||||
|
import xbsjScale from '/@/components/earthMap/components/xbsjScale.vue'; |
||||
|
import XbsjSelect from '/@/components/earthMap/components/XbsjSelect.vue'; |
||||
|
import XbsjColorButton from '/@/components/earthMap/components/XbsjColorButton.vue'; |
||||
|
import upload from '/@/components/earthMap/components/upload.vue'; |
||||
|
import Window from '@/components/earthMap/components/Window.vue'; |
||||
|
import { defHttp } from '/@/utils/http/axios'; |
||||
|
import { useMessage } from '/@/hooks/web/useMessage'; |
||||
|
import { addViewShedRadar } from '@/utils/earthMap/earthObj'; |
||||
|
|
||||
|
export default defineComponent({ |
||||
|
name: 'AddWaveCom', |
||||
|
components: { |
||||
|
xbsjScale, |
||||
|
XbsjSelect, |
||||
|
upload, |
||||
|
XbsjColorButton, |
||||
|
Window, |
||||
|
}, |
||||
|
props: { |
||||
|
title: { |
||||
|
type: String, |
||||
|
default: '添加雷达', |
||||
|
}, |
||||
|
setLabelStatus: { |
||||
|
type: Function, |
||||
|
default: null, |
||||
|
}, |
||||
|
setIconByRef: { |
||||
|
type: Function, |
||||
|
default: null, |
||||
|
}, |
||||
|
el: { |
||||
|
type: Object, |
||||
|
default: null, |
||||
|
}, |
||||
|
}, |
||||
|
setup(props) { |
||||
|
const { proxy }: any = getCurrentInstance(); |
||||
|
const { createMessage } = useMessage(); |
||||
|
// 宽高 |
||||
|
let widthCoefficient = ref(0.3); |
||||
|
let heightCoefficient = ref(0.5); |
||||
|
// 计算弹窗宽高定位 |
||||
|
const width = computed(() => { |
||||
|
return window.outerWidth * widthCoefficient.value; |
||||
|
}); |
||||
|
const height = computed(() => { |
||||
|
return window.outerHeight * heightCoefficient.value; |
||||
|
}); |
||||
|
const top = computed(() => { |
||||
|
return window.outerHeight * ((1.0 - heightCoefficient.value - 0.15) / 2); |
||||
|
}); |
||||
|
const left = computed(() => { |
||||
|
return (window.outerWidth * (1.0 - widthCoefficient.value)) / 2; |
||||
|
}); |
||||
|
// 雷达名称 |
||||
|
let name = ref(''); |
||||
|
// 所属区域列表 |
||||
|
let areaList = ref([]); |
||||
|
// 选中所属区域 |
||||
|
let selectArea: any = ref(null); |
||||
|
// 主机设备列表 |
||||
|
let hostDeviceList = ref([]); |
||||
|
// 选中的主机设备 |
||||
|
let selectHostDevice: any = ref(null); |
||||
|
// 设备编码 |
||||
|
let selectDeviceNum = ref(null); |
||||
|
// 上传图片文件 |
||||
|
let uploadFile:any = ref(null); |
||||
|
// 上传图片路径 |
||||
|
let previewImgUrl = ref(''); |
||||
|
// 设置上传次数 |
||||
|
let uploadFileCount = ref(1); |
||||
|
// 定时器 |
||||
|
let timer: any = ref(null); |
||||
|
// 是否有更新模型 |
||||
|
let isUpdateModel = ref(false); |
||||
|
// 取消还原数据 |
||||
|
let revert = ref(null); |
||||
|
// 当前模型 |
||||
|
let currentModel: any = ref(null); |
||||
|
// 俯仰角度 |
||||
|
let LngLatHeight = ref([0, 0, 0]); |
||||
|
// 扫描颜色 |
||||
|
let radarColor = ref({ rgba: { r: 0, g: 255, b: 0, a: 0.5 } }); |
||||
|
// 法线偏移角度 |
||||
|
let radarShifting = ref(1); |
||||
|
// 扫描范围 |
||||
|
let radarRange = ref(100); |
||||
|
// 扫描半径 |
||||
|
let radarRadius = ref(500); |
||||
|
// 雷达扫描编辑、取消使用 |
||||
|
let radarOldObj: any = ref({}); |
||||
|
// 提交对象 |
||||
|
let submitObject: any = ref({}); |
||||
|
// 窗口显示或隐藏 |
||||
|
let winVisible = ref(true); |
||||
|
// 是否跟随鼠标状态 |
||||
|
let creating = ref(false); |
||||
|
// 是否可见 |
||||
|
let show = ref(false); |
||||
|
// 是否展开表单项 |
||||
|
let expand = ref(true); |
||||
|
|
||||
|
// 监听图片上传 |
||||
|
watch(uploadFile, (newVal, _oldVal) => { |
||||
|
// 模拟表单提交的对象 |
||||
|
let formData = new FormData(); |
||||
|
// 设置上传目录为temp |
||||
|
formData.append('biz', 'temp'); |
||||
|
// 设置上传文件 |
||||
|
formData.append('file', newVal); |
||||
|
// 进行上传等待响应 |
||||
|
defHttp.post({ url: '/sys/common/upload', params: formData }, { isTransformResponse: false }).then((response) => { |
||||
|
// 响应并成功操作 |
||||
|
if (response.success) { |
||||
|
// 设置图片显示地址 |
||||
|
let imageUrl = '/dt/sys/common/static/' + response.message; |
||||
|
// 设置img dom元素src预览地址 |
||||
|
previewImgUrl.value = imageUrl; |
||||
|
// 设置地图中pin的图片地址 |
||||
|
currentModel.value.imageUrl = imageUrl; |
||||
|
if (!isUpdateModel.value && uploadFileCount.value == 1) { |
||||
|
// 设置pin展示 |
||||
|
show.value = true; |
||||
|
// 设置为编辑状态 |
||||
|
creating.value = true; |
||||
|
// 上传次数变成2 |
||||
|
uploadFileCount.value++; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
// 获取区域数据 |
||||
|
function getAreas() { |
||||
|
const submitData: any = { |
||||
|
pageNo: 1, |
||||
|
pageSize: 999, |
||||
|
}; |
||||
|
return defHttp |
||||
|
.get( |
||||
|
{ |
||||
|
url: '/military/msMapLine/list', |
||||
|
params: submitData, |
||||
|
}, |
||||
|
{ isTransformResponse: false } |
||||
|
) |
||||
|
.then((res) => { |
||||
|
if (res.success) { |
||||
|
areaList.value = res.result.records; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
// 获取主机设备 |
||||
|
function getHostDeviceList() { |
||||
|
const url = '/military/dtDeviceInfo/list'; |
||||
|
const args = { pageNo: 1, pageSize: 999 }; |
||||
|
return defHttp |
||||
|
.get({ url, params: args }, { isTransformResponse: false }) |
||||
|
.then((reponse) => { |
||||
|
if (reponse.success) { |
||||
|
hostDeviceList.value = reponse.result.records; |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
throw '获取主机信息错误'; |
||||
|
}); |
||||
|
} |
||||
|
// 名称修改的变化事件 |
||||
|
function nameChange(model) { |
||||
|
// pin类型的名称变化时修改显示的文字 |
||||
|
model.pinBuilder.extText = name.value; |
||||
|
} |
||||
|
// 修改属性状态,取反 |
||||
|
function modelState(propName) { |
||||
|
proxy[propName] = !proxy[propName]; |
||||
|
} |
||||
|
// 添加pin（雷达） |
||||
|
function addPin() { |
||||
|
// 创建pin |
||||
|
const pin = new window.XE.Obj.Pin(window.$earth); |
||||
|
// 设置缩放 |
||||
|
pin.scale = 0.8; |
||||
|
// 设置url |
||||
|
pin.imageUrl = ''; |
||||
|
// 设置最大可视距离 |
||||
|
pin.far = 1073741824; |
||||
|
// 设置显示文字样式 |
||||
|
pin.pinBuilder.extTextFont = '30px 楷体'; |
||||
|
pin.pinBuilder.extTextPixelOffset = [30, -20]; |
||||
|
pin.pinBuilder.fillColor = [1, 1, 1, 0.9]; |
||||
|
pin.pinBuilder.outlineColor = [0, 0, 0, 0.9]; |
||||
|
//移入移出事件 |
||||
|
pin.onmouseover = () => { |
||||
|
window.$earth.czm.viewer._container.style.cursor = 'pointer'; |
||||
|
}; |
||||
|
pin.onmouseout = () => { |
||||
|
window.$earth.czm.viewer._container.style.cursor = 'default'; |
||||
|
}; |
||||
|
// 绑定属性 |
||||
|
bindPinProps(pin); |
||||
|
// 设置为不可见 |
||||
|
show.value = false; |
||||
|
// 刷新窗体 |
||||
|
modelState('creating'); |
||||
|
|
||||
|
return pin; |
||||
|
} |
||||
|
// 绑定模型属性 |
||||
|
function bindPinProps(pin) { |
||||
|
pin.disposers.push(window.XE.MVVM.bindPosition(proxy, 'LngLatHeight', pin, 'position')); |
||||
|
pin.disposers.push(window.XE.MVVM.bind(proxy, 'creating', pin, 'creating')); |
||||
|
pin.disposers.push(window.XE.MVVM.bind(proxy, 'show', pin, 'show')); |
||||
|
} |
||||
|
// 取消 |
||||
|
function cancel() { |
||||
|
if (isUpdateModel.value) { |
||||
|
// 调用更新时的取消 |
||||
|
updateClose(); |
||||
|
} else { |
||||
|
// 调用创建时的取消 |
||||
|
close(); |
||||
|
} |
||||
|
//通过父组件v-if 关闭本组件 |
||||
|
proxy.$parent.addRadarComShow = false; |
||||
|
} |
||||
|
// 更新时的取消方法 |
||||
|
function updateClose() { |
||||
|
// 还原数据 |
||||
|
if (currentModel.value) { |
||||
|
currentModel.value.xbsjFromJSON(revert.value); |
||||
|
if (Object.keys(radarOldObj.value).length > 0) { |
||||
|
radarColor.value.rgba = radarOldObj.value.color; |
||||
|
radarRadius.value = radarOldObj.value.radarRadius; |
||||
|
radarRange.value = radarOldObj.value.radarRange; |
||||
|
radarShifting.value = radarOldObj.value.radarShifting; |
||||
|
} |
||||
|
currentModel.value.editing = false; |
||||
|
currentModel.value.positionEditing = false; |
||||
|
currentModel.value.rotationEditing = false; |
||||
|
} |
||||
|
} |
||||
|
// 创建时的取消方法 |
||||
|
function close() { |
||||
|
// 模型不为空时，销毁模型 |
||||
|
if (currentModel.value) { |
||||
|
if (currentModel.value.addViewShedReturn) { |
||||
|
console.log('window.$earth.czm.viewer.entities', window.$earth.czm.viewer.entities); |
||||
|
window.$earth.czm.viewer.entities.remove(currentModel.value.addViewShedReturn); |
||||
|
} |
||||
|
currentModel.value.addViewShedReturn = undefined; |
||||
|
currentModel.value.editing = false; |
||||
|
currentModel.value.destroy(); |
||||
|
} |
||||
|
} |
||||
|
// 确定 |
||||
|
function ok() { |
||||
|
// pin类型图片效验 |
||||
|
if (currentModel.value.imageUrl.length <= 0) { |
||||
|
createMessage.warning('需要先上传图片', 2); |
||||
|
return; |
||||
|
} else if (!selectHostDevice.value) { |
||||
|
createMessage.warning('主机设备不能为空', 2); |
||||
|
return; |
||||
|
} else if (!selectDeviceNum.value) { |
||||
|
createMessage.warning('设备编码不能为空', 2); |
||||
|
return; |
||||
|
} else if (selectArea.value == null || selectArea.value.id <= 0) { |
||||
|
// 非区域类型，区域效验 |
||||
|
createMessage.warning('请选择所属区域', 2); |
||||
|
return; |
||||
|
} |
||||
|
// 关闭编辑状态 |
||||
|
currentModel.value.editing = false; |
||||
|
// 提交数据 |
||||
|
submitData(); |
||||
|
} |
||||
|
// 提交数据方法 |
||||
|
function submitData() { |
||||
|
const lastIndex = currentModel.value.imageUrl.lastIndexOf('/temp'); |
||||
|
const ImgUrl = currentModel.value.imageUrl.substring(lastIndex + 1); |
||||
|
// 当前模型为Pin类型 |
||||
|
// 更具创建时选择的模型类型判断，赋予模型类型标识 |
||||
|
const labelAttr = 4; // 雷达字典编号4 微波字典编号10 |
||||
|
submitObject.value = { |
||||
|
mapLabel: { |
||||
|
id: null, |
||||
|
createBy: null, |
||||
|
createTime: null, |
||||
|
updateBy: null, |
||||
|
updateTime: null, |
||||
|
sysOrgCode: null, |
||||
|
labelAttr: labelAttr, // 类型标识 |
||||
|
labelName: name.value, // 名称 |
||||
|
lineId: selectArea.value?.id ? selectArea.value.id : null, // 所属区域 |
||||
|
labelLon: LngLatHeight.value[0], // x坐标 |
||||
|
labelLat: LngLatHeight.value[1], // y坐标 |
||||
|
labelHeight: LngLatHeight.value[2], // z坐标 |
||||
|
labelImgUrl: ImgUrl, // 设置url |
||||
|
labelStatus: 1, // 启动:1 不启用 0 |
||||
|
labelCode: selectDeviceNum.value, |
||||
|
cameraId: null, |
||||
|
cameraName: null, |
||||
|
pan: 0, |
||||
|
tile: 0, |
||||
|
zoom: 0, |
||||
|
placements: null, |
||||
|
}, |
||||
|
deviceId: selectHostDevice.value.id, |
||||
|
}; |
||||
|
let request: any = null; |
||||
|
// 提交地址 |
||||
|
let url = ''; |
||||
|
if (isUpdateModel.value) { |
||||
|
// 设置url为编辑地址，设置方法为put 设置记录id |
||||
|
url = '/military/msMapLabel/editMapLabel'; |
||||
|
// submitObject.value.mapLabel.id = props.eidtId; |
||||
|
request = defHttp.put({ url: url, params: submitObject.value }, { isTransformResponse: false }); |
||||
|
} else { |
||||
|
// 设置url为新增地址，设置方法为post |
||||
|
url = '/military/msMapLabel/addMapLabel'; |
||||
|
request = defHttp.post({ url: url, params: submitObject.value }, { isTransformResponse: false }); |
||||
|
} |
||||
|
const { setLabelStatus } = props; |
||||
|
// 提交数据，等待回复 |
||||
|
request |
||||
|
.then(function (response) { |
||||
|
// 数据回复，并成功 |
||||
|
if (response.success) { |
||||
|
// 设置显示节点的ref为 node_ref |
||||
|
const lineId = 'node_' + selectArea.value.id; |
||||
|
// const ldLineId = 'nodeSecondary_' + selectArea.value.id; |
||||
|
|
||||
|
// 该区域的微波集合 |
||||
|
const wbParent = window.$earth.sceneTree.$refs[lineId] && window.$earth.sceneTree.$refs[lineId].children[2]; |
||||
|
// 该区域的雷达集合 |
||||
|
const ldParent = window.$earth.sceneTree.$refs[lineId] && window.$earth.sceneTree.$refs[lineId].children[1]; |
||||
|
// 创建叶子节点 |
||||
|
let node = new window.XE.SceneTree.Leaf(currentModel.value); |
||||
|
// 设置节点显示名称 |
||||
|
node.title = name.value; |
||||
|
// 设置节点ref |
||||
|
node.ref = response.result; |
||||
|
// name属性用来记录区域id |
||||
|
node.name = submitObject.value.lineId; |
||||
|
// 用户属性用来记录标志类型 |
||||
|
currentModel.value.customProp = |
||||
|
'{"labelAttr":' + labelAttr + ',"labelCode":"' + selectDeviceNum.value + '","deviceId":"' + selectHostDevice.value.id + '"}'; |
||||
|
setLabelStatus(selectHostDevice.value, selectDeviceNum.value, node.ref, 2).finally(() => { |
||||
|
if (labelAttr == 4) { |
||||
|
// 雷达新增一圆 |
||||
|
ldParent.children.push(node); |
||||
|
} else { |
||||
|
// 微波新增一圆 |
||||
|
wbParent.children.push(node); |
||||
|
} |
||||
|
// 提示用户 |
||||
|
createMessage.success('添加成功！', 2); |
||||
|
}); |
||||
|
|
||||
|
//是否为雷达 |
||||
|
if (labelAttr == 4) { |
||||
|
let radarObj = { |
||||
|
radarCode: selectDeviceNum.value, |
||||
|
elevation: Number(radarRange.value), |
||||
|
workingRadius: Number(radarRadius.value), |
||||
|
angularRadian: Number(radarShifting.value), |
||||
|
customProp: JSON.stringify({ color: radarColor.value.rgba }), |
||||
|
}; |
||||
|
defHttp.post({ url: '/military/RadarConfig/add', params: radarObj }, { isTransformResponse: false }); |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
.then(function () { |
||||
|
finish(); |
||||
|
}); |
||||
|
} |
||||
|
// 提交完成 |
||||
|
function finish() { |
||||
|
if (currentModel.value) { |
||||
|
// 释放当前模型的引用 |
||||
|
currentModel.value.rotationEditing = false; |
||||
|
currentModel.value.positionEditing = false; |
||||
|
currentModel.value = null; |
||||
|
} |
||||
|
//通过父组件v-if 关闭本组件 |
||||
|
proxy.$parent.addRadarComShow = false; |
||||
|
} |
||||
|
// 雷达扫描 |
||||
|
function getRadarScan() { |
||||
|
if (timer.value) clearTimeout(timer.value); |
||||
|
timer.value = setTimeout(() => { |
||||
|
let rgb = radarColor.value.rgba; |
||||
|
if (currentModel.value.addViewShedReturn) { |
||||
|
console.log('window.$earth.czm.viewer.entities', window.$earth.czm.viewer.entities); |
||||
|
window.$earth.czm.viewer.entities.remove(currentModel.value.addViewShedReturn); |
||||
|
} |
||||
|
//计算偏移角 |
||||
|
let left = Number(radarShifting.value) - Number(radarRange.value) / 2; |
||||
|
currentModel.value.addViewShedReturn = addViewShedRadar( |
||||
|
currentModel.value.position, |
||||
|
radarRadius.value, |
||||
|
left, |
||||
|
Number(radarRange.value) / 2 + Number(radarShifting.value), |
||||
|
[rgb.r / 255, rgb.g / 255, rgb.b / 255, rgb.a] |
||||
|
); |
||||
|
}, 300); |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
// 设置当前状态为添加 |
||||
|
isUpdateModel.value = false; |
||||
|
// 获取主机设备 |
||||
|
getHostDeviceList().then(() => { |
||||
|
// 获取区域数据 |
||||
|
getAreas().then(() => { |
||||
|
// 折叠面板 |
||||
|
expand.value = true; |
||||
|
// 创建并绑定模型 |
||||
|
currentModel.value = addPin(); |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
return { |
||||
|
width, |
||||
|
height, |
||||
|
top, |
||||
|
left, |
||||
|
name, |
||||
|
areaList, |
||||
|
selectArea, |
||||
|
hostDeviceList, |
||||
|
selectHostDevice, |
||||
|
selectDeviceNum, |
||||
|
uploadFile, |
||||
|
previewImgUrl, |
||||
|
isUpdateModel, |
||||
|
LngLatHeight, |
||||
|
radarShifting, |
||||
|
radarColor, |
||||
|
radarRange, |
||||
|
radarRadius, |
||||
|
radarOldObj, |
||||
|
currentModel, |
||||
|
winVisible, |
||||
|
creating, |
||||
|
expand, |
||||
|
modelState, |
||||
|
getRadarScan, |
||||
|
nameChange, |
||||
|
cancel, |
||||
|
ok, |
||||
|
}; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.object-box { |
||||
|
width: 100%; |
||||
|
height: 86%; |
||||
|
|
||||
|
label { |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
} |
||||
|
:deep(.custom-item-box > div > input) { |
||||
|
width: 45% !important; |
||||
|
margin-right: 0% !important; |
||||
|
} |
||||
|
:deep(.custom-label) { |
||||
|
width: 16% !important; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-end; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
:deep(.object-box .custom-item) { |
||||
|
height: 10%; |
||||
|
margin-top: 2%; |
||||
|
} |
||||
|
:deep(.custom-item-box) { |
||||
|
padding-left: 5% !important; |
||||
|
width: 80% !important; |
||||
|
} |
||||
|
.name-input { |
||||
|
height: 90%; |
||||
|
width: 100%; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
border-radius: 3px; |
||||
|
border: none; |
||||
|
color: #ddd; |
||||
|
padding: 5px; |
||||
|
outline: none; |
||||
|
} |
||||
|
.xyz-input { |
||||
|
height: 90%; |
||||
|
width: 30%; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
border-radius: 3px; |
||||
|
border: none; |
||||
|
color: #ddd; |
||||
|
padding: 5px; |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
.y-margin { |
||||
|
margin-left: 5%; |
||||
|
margin-right: 5%; |
||||
|
} |
||||
|
.edit-model-btn { |
||||
|
cursor: pointer; |
||||
|
line-height: 5%; |
||||
|
} |
||||
|
|
||||
|
.edit-model-btn-disable { |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
.upload-box { |
||||
|
height: 100%; |
||||
|
width: 20%; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,542 @@ |
|||||
|
<!-- |
||||
|
* @Author: Fuyuu 1805498209@qq.com |
||||
|
* @Date: 2024-01-10 15:19:50 |
||||
|
* @LastEditors: Fuyuu 1805498209@qq.com |
||||
|
* @LastEditTime: 2024-01-11 15:49:37 |
||||
|
* @FilePath: \dt-admin-pc-v2\src\components\earthMap\toolbar\AddWaveCom.vue |
||||
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE |
||||
|
--> |
||||
|
<template> |
||||
|
<div class="create-model-modal" v-if="winVisible"> |
||||
|
<Window |
||||
|
:title="title" |
||||
|
@cancel="cancel" |
||||
|
@ok="ok" |
||||
|
:width="width" |
||||
|
:minWidth="600" |
||||
|
:height="height" |
||||
|
:left="left" |
||||
|
:top="top" |
||||
|
:floatright="false" |
||||
|
:footervisible="true" |
||||
|
v-show="!creating" |
||||
|
:expand="expand" |
||||
|
> |
||||
|
<div class="object-box"> |
||||
|
<div style="display: flex" class="custom-item"> |
||||
|
<label class="custom-label">微波名称:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<input v-model="name" class="name-input" style="height: 90%; width: 100%" @change="nameChange(currentModel)" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex" class="custom-item"> |
||||
|
<label class="custom-label">所属区域:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<XbsjSelect id="area-select" title="name" :list="areaList" v-model:value="selectArea" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex" class="custom-item"> |
||||
|
<label class="custom-label">主机设备:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<XbsjSelect title="deviceName" :list="hostDeviceList" v-model:value="selectHostDevice" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex" class="custom-item"> |
||||
|
<label class="custom-label">设备编码:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<input v-model="selectDeviceNum" class="name-input" style="height: 90%; width: 100%" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex; height: 20%" class="custom-item"> |
||||
|
<label class="custom-label">上传图标:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<div class="upload-box"> |
||||
|
<upload v-model:file="uploadFile" :pre-view-url="previewImgUrl" :isUpdateModel="isUpdateModel" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex" class="custom-item"> |
||||
|
<label class="custom-label">经纬度:</label> |
||||
|
<div class="custom-item-box"> |
||||
|
<!-- <XbsjLngLatHeight v-model="LngLatHeight" style="height: 90%; width: 100%"></XbsjLngLatHeight> --> |
||||
|
<input v-model="LngLatHeight[0]" type="number" class="xyz-input" /> |
||||
|
<input v-model="LngLatHeight[1]" type="number" class="xyz-input y-margin" /> |
||||
|
<input v-model="LngLatHeight[2]" type="number" class="xyz-input" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex; justify-content: center" class="custom-item"> |
||||
|
<button |
||||
|
@click="modelState('creating')" |
||||
|
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']" |
||||
|
:disabled="creating" |
||||
|
style="width: 20%; display: flex; align-items: center; justify-content: center" |
||||
|
> |
||||
|
拾取 |
||||
|
</button> |
||||
|
<button |
||||
|
@click="currentModel.editing = true" |
||||
|
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']" |
||||
|
:disabled="creating" |
||||
|
style="width: 20%; display: flex; align-items: center; justify-content: center" |
||||
|
> |
||||
|
移动 |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</Window> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script lang="ts"> |
||||
|
import { onMounted, defineComponent, ref, getCurrentInstance, computed, watch } from 'vue'; |
||||
|
import xbsjScale from '/@/components/earthMap/components/xbsjScale.vue'; |
||||
|
import XbsjSelect from '/@/components/earthMap/components/XbsjSelect.vue'; |
||||
|
import XbsjColorButton from '/@/components/earthMap/components/XbsjColorButton.vue'; |
||||
|
import upload from '/@/components/earthMap/components/upload.vue'; |
||||
|
import Window from '@/components/earthMap/components/Window.vue'; |
||||
|
import { defHttp } from '/@/utils/http/axios'; |
||||
|
import { useMessage } from '/@/hooks/web/useMessage'; |
||||
|
|
||||
|
export default defineComponent({ |
||||
|
name: 'AddWaveCom', |
||||
|
components: { |
||||
|
xbsjScale, |
||||
|
XbsjSelect, |
||||
|
upload, |
||||
|
XbsjColorButton, |
||||
|
Window, |
||||
|
}, |
||||
|
props: { |
||||
|
title: { |
||||
|
type: String, |
||||
|
default: '添加微波探测器', |
||||
|
}, |
||||
|
setLabelStatus: { |
||||
|
type: Function, |
||||
|
default: null, |
||||
|
}, |
||||
|
setIconByRef: { |
||||
|
type: Function, |
||||
|
default: null, |
||||
|
}, |
||||
|
el: { |
||||
|
type: Object, |
||||
|
default: null, |
||||
|
}, |
||||
|
}, |
||||
|
setup(props) { |
||||
|
const { proxy }: any = getCurrentInstance(); |
||||
|
const { createMessage } = useMessage(); |
||||
|
// 宽高 |
||||
|
let widthCoefficient = ref(0.3); |
||||
|
let heightCoefficient = ref(0.5); |
||||
|
// 计算弹窗宽高定位 |
||||
|
const width = computed(() => { |
||||
|
return window.outerWidth * widthCoefficient.value; |
||||
|
}); |
||||
|
const height = computed(() => { |
||||
|
return window.outerHeight * heightCoefficient.value; |
||||
|
}); |
||||
|
const top = computed(() => { |
||||
|
return window.outerHeight * ((1.0 - heightCoefficient.value - 0.15) / 2); |
||||
|
}); |
||||
|
const left = computed(() => { |
||||
|
return (window.outerWidth * (1.0 - widthCoefficient.value)) / 2; |
||||
|
}); |
||||
|
// 微波名称 |
||||
|
let name = ref(''); |
||||
|
// 所属区域列表 |
||||
|
let areaList = ref([]); |
||||
|
// 选中所属区域 |
||||
|
let selectArea: any = ref(null); |
||||
|
// 主机设备列表 |
||||
|
let hostDeviceList = ref([]); |
||||
|
// 选中的主机设备 |
||||
|
let selectHostDevice: any = ref(null); |
||||
|
// 设备编码 |
||||
|
let selectDeviceNum = ref(null); |
||||
|
// 上传图片文件 |
||||
|
let uploadFile: any = ref(null); |
||||
|
// 上传图片路径 |
||||
|
let previewImgUrl = ref(''); |
||||
|
// 设置上传次数 |
||||
|
let uploadFileCount = ref(1); |
||||
|
// 是否有更新模型 |
||||
|
let isUpdateModel = ref(false); |
||||
|
// 取消还原数据 |
||||
|
let revert = ref(null); |
||||
|
// 当前模型 |
||||
|
let currentModel: any = ref(null); |
||||
|
// 俯仰角度 |
||||
|
let LngLatHeight = ref([0, 0, 0]); |
||||
|
// 提交对象 |
||||
|
let submitObject: any = ref({}); |
||||
|
// 窗口显示或隐藏 |
||||
|
let winVisible = ref(true); |
||||
|
// 是否跟随鼠标状态 |
||||
|
let creating = ref(false); |
||||
|
// 是否可见 |
||||
|
let show = ref(false); |
||||
|
// 是否展开表单项 |
||||
|
let expand = ref(true); |
||||
|
|
||||
|
watch(uploadFile, (newVal, _oldVal) => { |
||||
|
// 模拟表单提交的对象 |
||||
|
let formData = new FormData(); |
||||
|
// 设置上传目录为temp |
||||
|
formData.append('biz', 'temp'); |
||||
|
// 设置上传文件 |
||||
|
formData.append('file', newVal); |
||||
|
// 进行上传等待响应 |
||||
|
defHttp.post({ url: '/sys/common/upload', params: formData }, { isTransformResponse: false }).then((response) => { |
||||
|
// 响应并成功操作 |
||||
|
if (response.success) { |
||||
|
// 设置图片显示地址 |
||||
|
let imageUrl = '/dt/sys/common/static/' + response.message; |
||||
|
// 设置img dom元素src预览地址 |
||||
|
previewImgUrl.value = imageUrl; |
||||
|
// 设置地图中pin的图片地址 |
||||
|
currentModel.value.imageUrl = imageUrl; |
||||
|
if (!isUpdateModel.value && uploadFileCount.value == 1) { |
||||
|
// 设置pin展示 |
||||
|
show.value = true; |
||||
|
// 设置为编辑状态 |
||||
|
creating.value = true; |
||||
|
// 上传次数变成2 |
||||
|
uploadFileCount.value++; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
// 获取区域数据 |
||||
|
function getAreas() { |
||||
|
const submitData: any = { |
||||
|
pageNo: 1, |
||||
|
pageSize: 999, |
||||
|
}; |
||||
|
return defHttp |
||||
|
.get( |
||||
|
{ |
||||
|
url: '/military/msMapLine/list', |
||||
|
params: submitData, |
||||
|
}, |
||||
|
{ isTransformResponse: false } |
||||
|
) |
||||
|
.then((res) => { |
||||
|
if (res.success) { |
||||
|
areaList.value = res.result.records; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
// 获取主机设备 |
||||
|
function getHostDeviceList() { |
||||
|
const url = '/military/dtDeviceInfo/list'; |
||||
|
const args = { pageNo: 1, pageSize: 999 }; |
||||
|
return defHttp |
||||
|
.get({ url, params: args }, { isTransformResponse: false }) |
||||
|
.then((reponse) => { |
||||
|
if (reponse.success) { |
||||
|
hostDeviceList.value = reponse.result.records; |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
throw '获取主机信息错误'; |
||||
|
}); |
||||
|
} |
||||
|
// 名称修改的变化事件 |
||||
|
function nameChange(model) { |
||||
|
// pin类型的名称变化时修改显示的文字 |
||||
|
model.pinBuilder.extText = name.value; |
||||
|
} |
||||
|
// 修改属性状态,取反 |
||||
|
function modelState(propName) { |
||||
|
proxy[propName] = !proxy[propName]; |
||||
|
} |
||||
|
// 添加pin（微波） |
||||
|
function addPin() { |
||||
|
// 创建pin |
||||
|
const pin = new window.XE.Obj.Pin(window.$earth); |
||||
|
// 设置缩放 |
||||
|
pin.scale = 0.8; |
||||
|
// 设置url |
||||
|
pin.imageUrl = ''; |
||||
|
// 设置最大可视距离 |
||||
|
pin.far = 1073741824; |
||||
|
// 设置显示文字样式 |
||||
|
pin.pinBuilder.extTextFont = '30px 楷体'; |
||||
|
pin.pinBuilder.extTextPixelOffset = [30, -20]; |
||||
|
pin.pinBuilder.fillColor = [1, 1, 1, 0.9]; |
||||
|
pin.pinBuilder.outlineColor = [0, 0, 0, 0.9]; |
||||
|
// 绑定属性 |
||||
|
bindPinProps(pin); |
||||
|
// 设置为不可见 |
||||
|
show.value = false; |
||||
|
// 刷新窗体 |
||||
|
modelState('creating'); |
||||
|
modelState('creating'); |
||||
|
return pin; |
||||
|
} |
||||
|
// 绑定模型属性 |
||||
|
function bindPinProps(pin) { |
||||
|
pin.disposers.push(window.XE.MVVM.bindPosition(proxy, 'LngLatHeight', pin, 'position')); |
||||
|
pin.disposers.push(window.XE.MVVM.bind(proxy, 'creating', pin, 'creating')); |
||||
|
pin.disposers.push(window.XE.MVVM.bind(proxy, 'show', pin, 'show')); |
||||
|
} |
||||
|
// 取消 |
||||
|
function cancel() { |
||||
|
if (isUpdateModel.value) { |
||||
|
// 调用更新时的取消 |
||||
|
updateClose(); |
||||
|
} else { |
||||
|
// 调用创建时的取消 |
||||
|
close(); |
||||
|
} |
||||
|
//通过父组件v-if 关闭本组件 |
||||
|
proxy.$parent.addWaveComShow = false; |
||||
|
} |
||||
|
// 更新时的取消方法 |
||||
|
function updateClose() { |
||||
|
// 还原数据 |
||||
|
if (currentModel.value) { |
||||
|
currentModel.value.xbsjFromJSON(revert.value); |
||||
|
currentModel.value.editing = false; |
||||
|
currentModel.value.positionEditing = false; |
||||
|
currentModel.value.rotationEditing = false; |
||||
|
} |
||||
|
} |
||||
|
// 创建时的取消方法 |
||||
|
function close() { |
||||
|
// 模型不为空时，销毁模型 |
||||
|
if (currentModel.value) { |
||||
|
if (currentModel.value.addViewShedReturn) { |
||||
|
window.$earth.czm.viewer.entities.remove(currentModel.value.addViewShedReturn); |
||||
|
} |
||||
|
currentModel.value.editing = false; |
||||
|
currentModel.value.destroy(); |
||||
|
} |
||||
|
} |
||||
|
// 确定 |
||||
|
function ok() { |
||||
|
// pin类型图片效验 |
||||
|
if (currentModel.value.imageUrl.length <= 0) { |
||||
|
createMessage.warning('需要先上传图片', 2); |
||||
|
return; |
||||
|
} else if (!selectHostDevice.value) { |
||||
|
createMessage.warning('主机设备不能为空', 2); |
||||
|
return; |
||||
|
} else if (!selectDeviceNum.value) { |
||||
|
createMessage.warning('设备编码不能为空', 2); |
||||
|
return; |
||||
|
} else if (selectArea.value == null || selectArea.value.id <= 0) { |
||||
|
// 非区域类型，区域效验 |
||||
|
createMessage.warning('请选择所属区域', 2); |
||||
|
return; |
||||
|
} |
||||
|
// 关闭编辑状态 |
||||
|
currentModel.value.editing = false; |
||||
|
// 提交数据 |
||||
|
submitData(); |
||||
|
} |
||||
|
// 提交数据方法 |
||||
|
function submitData() { |
||||
|
const lastIndex = currentModel.value.imageUrl.lastIndexOf('/temp'); |
||||
|
const ImgUrl = currentModel.value.imageUrl.substring(lastIndex + 1); |
||||
|
// 当前模型为Pin类型 |
||||
|
// 更具创建时选择的模型类型判断，赋予模型类型标识 |
||||
|
const labelAttr = 10; // 雷达字典编号4 微波字典编号10 |
||||
|
submitObject.value = { |
||||
|
mapLabel: { |
||||
|
id: null, |
||||
|
createBy: null, |
||||
|
createTime: null, |
||||
|
updateBy: null, |
||||
|
updateTime: null, |
||||
|
sysOrgCode: null, |
||||
|
labelAttr: labelAttr, // 类型标识 |
||||
|
labelName: name.value, // 名称 |
||||
|
lineId: selectArea.value?.id ? selectArea.value.id : null, // 所属区域 |
||||
|
labelLon: LngLatHeight.value[0], // x坐标 |
||||
|
labelLat: LngLatHeight.value[1], // y坐标 |
||||
|
labelHeight: LngLatHeight.value[2], // z坐标 |
||||
|
labelImgUrl: ImgUrl, // 设置url |
||||
|
labelStatus: 1, // 启动:1 不启用 0 |
||||
|
labelCode: selectDeviceNum.value, |
||||
|
cameraId: null, |
||||
|
cameraName: null, |
||||
|
pan: 0, |
||||
|
tile: 0, |
||||
|
zoom: 0, |
||||
|
placements: null, |
||||
|
}, |
||||
|
deviceId: selectHostDevice.value.id, |
||||
|
}; |
||||
|
let request: any = null; |
||||
|
// 提交地址 |
||||
|
let url = ''; |
||||
|
if (isUpdateModel.value) { |
||||
|
// 设置url为编辑地址，设置方法为put 设置记录id |
||||
|
url = '/military/msMapLabel/editMapLabel'; |
||||
|
// submitObject.value.mapLabel.id = props.eidtId; |
||||
|
request = defHttp.put({ url: url, params: submitObject.value }, { isTransformResponse: false }); |
||||
|
} else { |
||||
|
// 设置url为新增地址，设置方法为post |
||||
|
url = '/military/msMapLabel/addMapLabel'; |
||||
|
request = defHttp.post({ url: url, params: submitObject.value }, { isTransformResponse: false }); |
||||
|
} |
||||
|
const { setLabelStatus } = props; |
||||
|
// 提交数据，等待回复 |
||||
|
request |
||||
|
.then(function (response) { |
||||
|
// 数据回复，并成功 |
||||
|
if (response.success) { |
||||
|
// 设置显示节点的ref为 node_ref |
||||
|
const lineId = 'node_' + selectArea.value.id; |
||||
|
// const ldLineId = 'nodeSecondary_' + selectArea.value.id; |
||||
|
|
||||
|
// 该区域的微波集合 |
||||
|
const wbParent = window.$earth.sceneTree.$refs[lineId] && window.$earth.sceneTree.$refs[lineId].children[2]; |
||||
|
// 该区域的雷达集合 |
||||
|
// const ldParent = window.$earth.sceneTree.$refs[ldLineId]; |
||||
|
// 创建叶子节点 |
||||
|
let node = new window.XE.SceneTree.Leaf(currentModel.value); |
||||
|
// 设置节点显示名称 |
||||
|
node.title = name.value; |
||||
|
// 设置节点ref |
||||
|
node.ref = response.result; |
||||
|
// name属性用来记录区域id |
||||
|
node.name = submitObject.value.lineId; |
||||
|
// 用户属性用来记录标志类型 |
||||
|
currentModel.value.customProp = |
||||
|
'{"labelAttr":' + labelAttr + ',"labelCode":"' + selectDeviceNum.value + '","deviceId":"' + selectHostDevice.value.id + '"}'; |
||||
|
setLabelStatus(selectHostDevice.value, selectDeviceNum.value, node.ref, 2).finally(() => { |
||||
|
// 微波新增一圆 |
||||
|
wbParent.children.push(node); |
||||
|
// 提示用户 |
||||
|
createMessage.success('添加成功！', 2); |
||||
|
}); |
||||
|
} |
||||
|
}) |
||||
|
.then(function () { |
||||
|
finish(); |
||||
|
}); |
||||
|
} |
||||
|
// 提交完成 |
||||
|
function finish() { |
||||
|
if (currentModel.value) { |
||||
|
// 释放当前模型的引用 |
||||
|
currentModel.value.rotationEditing = false; |
||||
|
currentModel.value.positionEditing = false; |
||||
|
currentModel.value = null; |
||||
|
} |
||||
|
//通过父组件v-if 关闭本组件 |
||||
|
proxy.$parent.addWaveComShow = false; |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
// 设置当前状态为添加 |
||||
|
isUpdateModel.value = false; |
||||
|
// 获取主机设备 |
||||
|
getHostDeviceList().then(() => { |
||||
|
// 获取区域数据 |
||||
|
getAreas().then(() => { |
||||
|
// 折叠面板 |
||||
|
expand.value = true; |
||||
|
// 创建并绑定模型 |
||||
|
currentModel.value = addPin(); |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
return { |
||||
|
width, |
||||
|
height, |
||||
|
top, |
||||
|
left, |
||||
|
name, |
||||
|
areaList, |
||||
|
selectArea, |
||||
|
hostDeviceList, |
||||
|
selectHostDevice, |
||||
|
selectDeviceNum, |
||||
|
uploadFile, |
||||
|
previewImgUrl, |
||||
|
isUpdateModel, |
||||
|
LngLatHeight, |
||||
|
currentModel, |
||||
|
winVisible, |
||||
|
creating, |
||||
|
expand, |
||||
|
modelState, |
||||
|
nameChange, |
||||
|
cancel, |
||||
|
ok, |
||||
|
}; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.object-box { |
||||
|
width: 100%; |
||||
|
height: 86%; |
||||
|
|
||||
|
label { |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
} |
||||
|
:deep(.custom-item-box > div > input) { |
||||
|
width: 45% !important; |
||||
|
margin-right: 0% !important; |
||||
|
} |
||||
|
:deep(.custom-label) { |
||||
|
width: 15% !important; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-end; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
:deep(.object-box .custom-item) { |
||||
|
height: 10%; |
||||
|
margin-top: 2%; |
||||
|
} |
||||
|
:deep(.custom-item-box) { |
||||
|
padding-left: 5% !important; |
||||
|
width: 80% !important; |
||||
|
} |
||||
|
.name-input { |
||||
|
height: 90%; |
||||
|
width: 100%; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
border-radius: 3px; |
||||
|
border: none; |
||||
|
color: #ddd; |
||||
|
padding: 5px; |
||||
|
outline: none; |
||||
|
} |
||||
|
.xyz-input { |
||||
|
height: 90%; |
||||
|
width: 30%; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
border-radius: 3px; |
||||
|
border: none; |
||||
|
color: #ddd; |
||||
|
padding: 5px; |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
.y-margin { |
||||
|
margin-left: 5%; |
||||
|
margin-right: 5%; |
||||
|
} |
||||
|
.edit-model-btn { |
||||
|
cursor: pointer; |
||||
|
line-height: 5%; |
||||
|
} |
||||
|
|
||||
|
.edit-model-btn-disable { |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
.upload-box { |
||||
|
height: 100%; |
||||
|
width: 20%; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue