|
|
|
@ -5,7 +5,8 @@ |
|
|
|
<a-col :span="12"> |
|
|
|
<a-form-item label="所属区域" v-bind="validateInfos.sceneId"> |
|
|
|
<!-- <a-input v-model:value="formData.sceneId" placeholder="请选择所属区域" :disabled="disabled"></a-input> --> |
|
|
|
<ApiTreeSelect :api="sceneIdTree" v-model:value="formData.sceneId" placeholder="请选择所属区域" :disabled="disabled"></ApiTreeSelect> |
|
|
|
<ApiTreeSelect :api="sceneIdTree" v-model:value="formData.sceneId" placeholder="请选择所属区域" :disabled="disabled"> |
|
|
|
</ApiTreeSelect> |
|
|
|
</a-form-item> |
|
|
|
</a-col> |
|
|
|
<a-col :span="12"> |
|
|
|
@ -81,6 +82,11 @@ |
|
|
|
:disabled="disabled" /> |
|
|
|
</a-form-item> |
|
|
|
</a-col> |
|
|
|
<a-col :span="12"> |
|
|
|
<a-form-item label="绘制区域"> |
|
|
|
<div class="centerText"><img :src="locationPng" class="dwImg" @click="mapShow" /></div> |
|
|
|
</a-form-item> |
|
|
|
</a-col> |
|
|
|
<a-col :span="12"> |
|
|
|
<a-form-item label="位置" v-bind="validateInfos.positions"> |
|
|
|
<a-textarea v-model:value="formData.positions" :rows="4" placeholder="请输入位置" :disabled="disabled" /> |
|
|
|
@ -88,6 +94,16 @@ |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
</a-form> |
|
|
|
|
|
|
|
|
|
|
|
<a-modal title="绘制区域" :visible="mapVisible" @cancel="destroyed" width="60vw" destroyOnClose wrapClassName="EarthMap"> |
|
|
|
<a-row style="height: 60vh;"> |
|
|
|
<a-col :span="24"> |
|
|
|
<EarthComp ref="earth" :addAreaHandler=true /> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
</a-modal> |
|
|
|
|
|
|
|
</a-spin> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -104,15 +120,22 @@ import { Form } from 'ant-design-vue'; |
|
|
|
import { ColorPicker } from "vue3-colorpicker"; |
|
|
|
import "vue3-colorpicker/style.css"; |
|
|
|
import { useUserStore } from '/@/store/modules/user'; |
|
|
|
import EarthComp from '@/views/earthMap/edit/EarthComp.vue'; |
|
|
|
import locationPng from '@/assets/images/getLocation.png'; |
|
|
|
import $mitt from '@/utils/earthMap/mitt'; |
|
|
|
import { onBeforeUnmount } from 'vue'; |
|
|
|
import { toRaw } from 'vue'; |
|
|
|
const userStore = useUserStore(); |
|
|
|
|
|
|
|
//远程树 |
|
|
|
const sceneIdTree = () => defHttp.get<Recordable[]> |
|
|
|
({ url: "/military/msMapScene/queryTreeByCode", |
|
|
|
params:{ |
|
|
|
sceneId: userStore.userInfo?.sceneId + "*" |
|
|
|
} }).then(res=>{ return [res];}) |
|
|
|
; |
|
|
|
({ |
|
|
|
url: "/military/msMapScene/queryTreeByCode", |
|
|
|
params: { |
|
|
|
sceneId: userStore.userInfo?.sceneId + "*" |
|
|
|
} |
|
|
|
}).then(res => { return [res]; }) |
|
|
|
; |
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
|
formDisabled: { type: Boolean, default: false }, |
|
|
|
@ -149,7 +172,7 @@ const validatorRules = { |
|
|
|
materialType: [{ required: true, message: '请选择模型材质类型!' },], |
|
|
|
interpolation: [{ required: true, message: '请选择插值方式!' },], |
|
|
|
color: [{ required: true, message: '请输入颜色!' },], |
|
|
|
intervalColor: [{ required: true, message: '请输入间隔颜色!' },], |
|
|
|
// intervalColor: [{ required: true, message: '请输入间隔颜色!' },], |
|
|
|
cycleFrame: [{ required: true, message: '请输入循环周期!' },], |
|
|
|
isLoop: [{ required: true, message: '请选择是否首尾相连!' },], |
|
|
|
isDepthCheck: [{ required: true, message: '请选择是否深度检测!' },], |
|
|
|
@ -239,22 +262,33 @@ function edit(record) { |
|
|
|
//赋值 |
|
|
|
Object.assign(formData, record); |
|
|
|
if (formData.color) { |
|
|
|
let color = formData.color |
|
|
|
color = color.replace("[", '') |
|
|
|
color = color.replace("]", '') |
|
|
|
color = color.split(",") |
|
|
|
pureColor.value = { "r": color[0] * 255, "g": color[1] * 255, "b": color[2] * 255, "a": color[3] } |
|
|
|
colorPickerChange(formData.color,pureColor) |
|
|
|
// let color = formData.color |
|
|
|
// color = color.replace("[", '') |
|
|
|
// color = color.replace("]", '') |
|
|
|
// color = color.split(",") |
|
|
|
// pureColor.value = { "r": color[0] * 255, "g": color[1] * 255, "b": color[2] * 255, "a": color[3] } |
|
|
|
} |
|
|
|
if (formData.intervalColor) { |
|
|
|
let color = formData.intervalColor |
|
|
|
color = color.replace("[", '') |
|
|
|
color = color.replace("]", '') |
|
|
|
color = color.split(",") |
|
|
|
intervalColor.value = { "r": color[0] * 255, "g": color[1] * 255, "b": color[2] * 255, "a": color[3] } |
|
|
|
colorPickerChange(formData.intervalColor,intervalColor) |
|
|
|
// let color = formData.intervalColor |
|
|
|
// color = color.replace("[", '') |
|
|
|
// color = color.replace("]", '') |
|
|
|
// color = color.split(",") |
|
|
|
// intervalColor.value = { "r": color[0] * 255, "g": color[1] * 255, "b": color[2] * 255, "a": color[3] } |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
//整理颜色选择器 |
|
|
|
function colorPickerChange(color, colorStr) { |
|
|
|
// console.log('colorStr',colorStr); |
|
|
|
color = color.replace("[", '') |
|
|
|
color = color.replace("]", '') |
|
|
|
color = color.split(",") |
|
|
|
colorStr.value = { "r": color[0] * 255, "g": color[1] * 255, "b": color[2] * 255, "a": color[3] } |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* 提交数据 |
|
|
|
*/ |
|
|
|
@ -293,11 +327,113 @@ async function submitForm() { |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
// 弹窗地图框属性 |
|
|
|
const mapVisible = ref(false); |
|
|
|
const mapShow = function () { |
|
|
|
mapVisible.value = true; |
|
|
|
}; |
|
|
|
const earth = ref() |
|
|
|
function destroyed() { |
|
|
|
// console.log("earth", earth.value); |
|
|
|
earth.value.destroy(); |
|
|
|
nextTick(() => { |
|
|
|
mapVisible.value = false |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
//赋值 |
|
|
|
function areaAssign(currentModel) { |
|
|
|
// 模型名称 |
|
|
|
// formData.name = currentModel.name |
|
|
|
// 线段编码 |
|
|
|
formData.lineCode = currentModel.guid |
|
|
|
// 首尾相连属性 |
|
|
|
formData.isLoop = Number(currentModel.loop) |
|
|
|
// 深度检查 |
|
|
|
formData.isDepthCheck = Number(currentModel.depthTest) |
|
|
|
// 宽度 |
|
|
|
formData.width = currentModel.width |
|
|
|
// 插值方式 |
|
|
|
formData.interpolation = currentModel.arcType |
|
|
|
// 路径数组 |
|
|
|
formData.positions = JSON.stringify(currentModel.positions) |
|
|
|
// 材质类型 |
|
|
|
switch (currentModel.material.type) { |
|
|
|
// 实线 |
|
|
|
case 'XbsjColorMaterial': |
|
|
|
// 实线材质0 |
|
|
|
formData.materialType = 0; |
|
|
|
// 线段颜色 |
|
|
|
formData.color = JSON.stringify(currentModel.material.XbsjColorMaterial.color); |
|
|
|
// 以下为没有属性，所以赋予默认值 |
|
|
|
formData.intervalColor = null; |
|
|
|
formData.dashLength = 0; |
|
|
|
formData.dashStyle = 0; |
|
|
|
break; |
|
|
|
// 虚线 |
|
|
|
case 'XbsjPolylineDashMaterial': |
|
|
|
// 虚线材质1 |
|
|
|
formData.materialType = 1; |
|
|
|
// 线段颜色 |
|
|
|
formData.color = JSON.stringify(currentModel.material.XbsjPolylineDashMaterial.color); |
|
|
|
// 间隔颜色 |
|
|
|
formData.intervalColor = JSON.stringify(currentModel.material.XbsjPolylineDashMaterial.gapColor); |
|
|
|
// 虚线长度 |
|
|
|
formData.dashLength = currentModel.material.XbsjPolylineDashMaterial.dashLength; |
|
|
|
// 虚线样式 |
|
|
|
formData.dashStyle = currentModel.material.XbsjPolylineDashMaterial.dashPattern; |
|
|
|
break; |
|
|
|
// 箭头线 |
|
|
|
case 'XbsjPolylineArrowMaterial': |
|
|
|
// 箭头线2 |
|
|
|
formData.materialType = 2; |
|
|
|
// 线段颜色 |
|
|
|
formData.color = JSON.stringify(currentModel.material.XbsjPolylineArrowMaterial.color); |
|
|
|
// 以下为没有的属性 |
|
|
|
formData.intervalColor = null; |
|
|
|
formData.dashLength = 0; |
|
|
|
formData.dashStyle = 0; |
|
|
|
break; |
|
|
|
// 轨迹线 |
|
|
|
case 'XbsjODLineMaterial': |
|
|
|
// 轨迹线 |
|
|
|
formData.materialType = 3; |
|
|
|
// 线段颜色 |
|
|
|
formData.color = JSON.stringify(currentModel.material.XbsjODLineMaterial.color); |
|
|
|
// 没有的属性 |
|
|
|
formData.intervalColor = null; |
|
|
|
formData.dashLength = 0; |
|
|
|
formData.dashStyle = 0; |
|
|
|
// 循环周期 |
|
|
|
formData.cycleFrame = currentModel.material.XbsjODLineMaterial.totoalFrameCount; |
|
|
|
break; |
|
|
|
} |
|
|
|
//赋值颜色选择器 |
|
|
|
colorPickerChange(formData.color,pureColor) |
|
|
|
if(formData.intervalColor) |
|
|
|
colorPickerChange(formData.intervalColor,intervalColor) |
|
|
|
} |
|
|
|
onMounted(() => { |
|
|
|
$mitt.on('toMsMapLineForm', (currentModel: any) => { |
|
|
|
// console.log("currentModel", currentModel); |
|
|
|
//赋值 |
|
|
|
areaAssign(currentModel) |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
onBeforeUnmount(() => { |
|
|
|
$mitt.off('toMsMapLineForm'); |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
defineExpose({ |
|
|
|
add, |
|
|
|
edit, |
|
|
|
submitForm, |
|
|
|
mapShow, |
|
|
|
earth, |
|
|
|
destroyed, |
|
|
|
|
|
|
|
}); |
|
|
|
</script> |
|
|
|
|
|
|
|
@ -307,4 +443,11 @@ defineExpose({ |
|
|
|
overflow-y: auto; |
|
|
|
padding: 24px 24px 24px 24px; |
|
|
|
} |
|
|
|
|
|
|
|
.dwImg { |
|
|
|
width: 10%; |
|
|
|
height: 10%; |
|
|
|
margin-left: 3%; |
|
|
|
cursor: pointer !important; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
