<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="deviceName">
|
<el-input v-model="form.deviceName" placeholder="请输入设备名称" />
|
</el-form-item>
|
<el-form-item label="所属线路" prop="belongingRoute">
|
<el-input v-model="form.belongingRoute" placeholder="请输入所属线路" />
|
</el-form-item>
|
<el-form-item label="选择模型" prop="modelId">
|
<el-select v-model="form.modelId" placeholder="选择模型" @change="change">
|
<el-option v-for="key in modelListData" :key="key.id" :label="key.modelName"
|
:value="key.id"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="朝向" prop="face">
|
<el-input v-model="form.face" placeholder="请输入朝向" style="width:90%;"/>
|
<i class="el-icon-map-location" @click="gettiles3dCam" title="预览"></i>
|
</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: {
|
deviceName: [
|
{ required: true, message: '请输入设备名称', trigger: 'blur' }
|
],
|
},
|
// 部门数据
|
deptOptions: null,
|
modelListData:[],
|
modelUrl:null
|
}
|
},
|
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,
|
})
|
let url = this.modelListData.filter(item=>item.id == this.form.modelId)[0].modelRoute
|
this.modelUrl = url
|
const position = Cesium.Cartesian3.fromDegrees(this.form.longitude, this.form.latitude, this.form.altitude);
|
// 设置模型方向（可选）
|
let model = viewer.entities.getById("MyModel");
|
const heading = Cesium.Math.toRadians(this.form.face); // 朝东南方向
|
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:this.modelUrl, // 替换成你的模型路径
|
scale: 1000,
|
},
|
});
|
viewer.flyTo(entity)
|
}else {
|
model.orientation = orientation
|
}
|
})
|
})
|
} 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)
|
this.form.longitude = Number(this.form.longitude)
|
this.form.latitude = Number(this.form.latitude)
|
this.form.altitude = Number(this.form.altitude)
|
this.form.face = Number(this.form.face)
|
if (valid) {
|
this.$api.save('tower/device/', '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 || []
|
})
|
},
|
change(id){
|
console.log(id)
|
let url = this.modelListData.filter(item=>item.id == id)[0].modelRoute
|
console.log(url)
|
this.modelUrl = url
|
},
|
gettiles3dCam(){
|
console.log(this.form)
|
if(!this.form.face) {
|
return this.$message.error('请输入朝向')
|
}
|
if (!this.form.longitude) {
|
this.$message.error("请输入经度");
|
return;
|
}
|
if (!this.form.latitude) {
|
this.$message.error("请输入纬度");
|
return;
|
}
|
if (!this.form.altitude) {
|
this.$message.error("请输入高度");
|
return;
|
}
|
//动态经纬度朝向 加载模型位置预览
|
// const position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
|
const position = Cesium.Cartesian3.fromDegrees(this.form.longitude, this.form.latitude, this.form.altitude);
|
// 设置模型方向（可选）
|
// const heading = Cesium.Math.toRadians(135); // 朝东南方向
|
let model = viewer.entities.getById("MyModel");
|
const heading = Cesium.Math.toRadians(this.form.face); // 朝东南方向
|
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: this.modelUrl, // 替换成你的模型路径
|
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>
|
