<template>
|
<div class="">
|
<!-- 添加或修改塔理对话框 -->
|
<Modal :title="form.id ? '修改设备' : '添加设备'" v-model="open">
|
<template slot="form">
|
<el-form ref="form" :model="form" :rules="rules" label-width="auto">
|
<el-form-item label="设备名称" prop="name">
|
<el-input v-model="form.name1" placeholder="请输入设备名称" />
|
</el-form-item>
|
<el-form-item label="所属线路" prop="beloneRoad">
|
<el-input v-model="form.name2" placeholder="请输入所属线路" />
|
</el-form-item>
|
<el-form-item label="选择模型" prop="wellType">
|
<el-select v-model="form.wellType" placeholder="选择模型">
|
<el-option v-for="key in modelListData" :key="key.id" :label="key.modelType"
|
:value="key.id"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="朝向" prop="direction">
|
<el-input v-model="form.direction" placeholder="请输入朝向" style="width:90%;"/>
|
<i class="el-icon-map-location" @click="gettiles3dCam" title="预览"></i>
|
</el-form-item>
|
<!-- <el-form-item label="模型类型" prop="wellType">
|
<el-select v-model="form.wellType" placeholder="模型类型">
|
<el-option v-for="key in model_type" :key="key.value" :label="key.label"
|
:value="key.value"></el-option>
|
</el-select>
|
</el-form-item> -->
|
</el-form>
|
</template>
|
<template slot="cesium">
|
<cesiumMapSelctPoint showSearch ref="cesiumMapSelctPoint" @on-selectAddress="handleSelectAddress">
|
</cesiumMapSelctPoint>
|
</template>
|
<template slot="footer">
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
<el-button @click="cancel">取消</el-button>
|
</template>
|
</Modal>
|
</div>
|
</template>
|
|
<script>
|
import cesiumMapSelctPoint from "@/components/common/cesiumMapSelctPoint.vue";
|
import { modelList} from "@/api/system/device"
|
export default {
|
name: 'modelManage',
|
components: { cesiumMapSelctPoint },
|
props: {
|
model_type: {
|
type: Array,
|
default() {
|
return []
|
}
|
},
|
},
|
data() {
|
return {
|
// 部门数据
|
deptOptions: [],
|
// 是否显示弹出层
|
open: false,
|
// 表单参数
|
form: {},
|
// 表单校验
|
rules: {
|
name: [
|
{ required: true, message: '请输入塔名称', trigger: 'blur' }
|
],
|
deptId: [
|
{ required: true, message: '归属部门' } // trigger监听不到 使用@input单独校验vue-treeSelect表单项
|
]
|
},
|
// 部门数据
|
deptOptions: null,
|
modelListData:[]
|
}
|
},
|
methods: {
|
show(ids) {
|
this.form = {}
|
this.resetForm("form");
|
|
if (ids) {
|
// 编辑
|
this.$api.detail('/tower/device', ids).then(res => {
|
this.form = res.data
|
this.open = true
|
this.$nextTick(() => {
|
this.$refs.cesiumMapSelctPoint.showPickPoint({
|
longitude: +this.form.longitude,
|
latitude: +this.form.latitude,
|
altitude: +this.form.altitude,
|
})
|
})
|
})
|
} else {
|
// 新增
|
this.open = true
|
this.$nextTick(() => {
|
this.$refs.cesiumMapSelctPoint.clearMap()
|
})
|
}
|
},
|
handleSelectAddress(data) {
|
this.$set(this.form, 'longitude', data.longitude)
|
this.$set(this.form, 'latitude', data.latitude)
|
this.$set(this.form, 'altitude', data.altitude)
|
this.$refs.form.validateField('longitude')
|
this.$refs.form.validateField('latitude')
|
this.$refs.form.validateField('altitude')
|
},
|
submitForm() {
|
this.$refs["form"].validate(valid => {
|
console.log(this.form)
|
// if (valid) {
|
// this.$api.save('work/tower/', 'id', Object.assign({}, this.form)).then(res => {
|
// this.form = {}
|
// this.$emit('on-submit')
|
// this.open = false
|
// })
|
// }
|
});
|
},
|
cancel() {
|
this.$refs.cesiumMapSelctPoint.clearMap()
|
this.open = false
|
},
|
getModel(){
|
let params = {
|
pageNum:1,
|
pageSize:999
|
}
|
modelList(params).then(res=>{
|
console.log(res)
|
this.modelListData = res.rows || []
|
})
|
},
|
gettiles3dCam(){
|
console.log(this.form)
|
//动态经纬度朝向 加载模型位置预览
|
const position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
|
// 设置模型方向（可选）
|
// const heading = Cesium.Math.toRadians(135); // 朝东南方向
|
let model = viewer.entities.getById("MyModel");
|
const heading = Cesium.Math.toRadians(this.form.direction); // 朝东南方向
|
const pitch = 0;
|
const roll = 0;
|
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
|
position,
|
new Cesium.HeadingPitchRoll(heading, pitch, roll)
|
);
|
if(!model) {
|
// 加载 glTF 模型
|
const entity = viewer.entities.add({
|
id: "MyModel",
|
name: "MyModel",
|
position: position,
|
orientation: orientation,
|
model: {
|
uri: "/Model/tower.glb", // 替换成你的模型路径
|
scale: 1000,
|
},
|
});
|
viewer.flyTo(entity)
|
}else {
|
model.orientation = orientation
|
}
|
|
|
}
|
},
|
mounted() {
|
this.getModel()
|
},
|
}
|
</script>
|
|
<style scoped>
|
.el-icon-map-location{
|
font-size: 25px;
|
margin-left: 10px;
|
cursor: pointer;
|
}
|
.el-icon-map-location:hover{
|
color: cyan;
|
}
|
|
</style>
|
