<template>
|
<div class="list">
|
<div class="header_box">
|
<span>模型属性绑定</span>
|
</div>
|
<div class="content">
|
<div class="search">
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
<div class="form_box1">
|
<el-form-item label="模型ID">
|
<!-- <span>{{ formInline.modelId }}</span> -->
|
<el-input disabled v-model="formInline.modelId"></el-input>
|
</el-form-item>
|
<el-form-item label="模型经度">
|
<!-- <span>{{ formInline.lng }}</span> -->
|
<el-input disabled v-model="formInline.lng"> </el-input>
|
</el-form-item>
|
<el-form-item label="模型纬度">
|
<!-- <span>{{ formInline.lat }}</span> -->
|
<el-input disabled v-model="formInline.lat"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
v-show="showtableList"
|
plain
|
@click="selectModel"
|
>选择模型</el-button
|
>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
v-show="!showtableList"
|
plain
|
@click="finishSelect"
|
>确定</el-button
|
>
|
</el-form-item>
|
</div>
|
</el-form>
|
</div>
|
<div
|
class="table_box"
|
v-if="this.itemInfomation[0].tabletype == 'busDeviceMain'"
|
>
|
<el-table border :data="itemInfomation" stripe style="width: 100%">
|
<!-- <el-table-column prop="bdmId" label="设备ID"> </el-table-column> -->
|
<el-table-column min-width="100" prop="deviceNo" label="设备编码">
|
</el-table-column>
|
<el-table-column
|
min-width="100"
|
prop="bdmSpecification"
|
label="规格型号"
|
>
|
</el-table-column>
|
<el-table-column
|
min-width="160"
|
prop="bdmDeviceName"
|
label="设备名称"
|
>
|
</el-table-column>
|
<el-table-column min-width="50" prop="bdmType" label="设备类别">
|
</el-table-column>
|
</el-table>
|
<div class="btn_box">
|
<el-button type="success" plain @click="updateBind"
|
>绑定提交</el-button
|
>
|
<el-button type="info" plain @click="backList"
|
>返回绑定查询</el-button
|
>
|
</div>
|
</div>
|
<div class="table_box" v-else>
|
<el-table border :data="itemInfomation" stripe style="width: 100%">
|
<!-- <el-table-column prop="id" label="设备ID"> </el-table-column> -->
|
<el-table-column min-width="100" prop="deviceNo" label="设备编码">
|
</el-table-column>
|
<el-table-column min-width="100" prop="deviceName" label="设备名称">
|
</el-table-column
|
><el-table-column min-width="100" prop="deviceModel" label="规格型号">
|
</el-table-column>
|
<el-table-column min-width="100" prop="deivceType" label="设备类别">
|
</el-table-column>
|
</el-table>
|
<div class="pag" style="text-align: center; margin-top: 20px"></div>
|
<div class="btn_box">
|
<el-button type="success" plain @click="updateBind"
|
>绑定提交</el-button
|
>
|
<el-button type="info" plain @click="backList"
|
>返回绑定查询</el-button
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
let handler;
|
let pickedFeature;
|
|
import {
|
updatebusDeviceMainlist,
|
updatebusProductionDevicelist,
|
} from "../../../api/api";
|
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data() {
|
//这里存放数据
|
return {
|
showtableList: true,
|
currentPage3: 5,
|
itemInfomation: [],
|
options: [],
|
tabletype: "",
|
formInline: {
|
lng: "",
|
lat: "",
|
modelId: "",
|
},
|
};
|
},
|
//方法集合
|
methods: {
|
selectModel() {
|
this.showtableList = !this.showtableList;
|
handler && handler.destroy();
|
handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
|
handler.setInputAction((event) => {
|
pickedFeature && (pickedFeature.color = Cesium.Color.WHITE);
|
pickedFeature = sgworld.Viewer.scene.pick(event.position);
|
if (Cesium.defined(pickedFeature)) {
|
if (pickedFeature.primitive instanceof Cesium.Cesium3DTileset) {
|
if (pickedFeature && pickedFeature.getProperty) {
|
pickedFeature.color = Cesium.Color.RED.withAlpha(0.8);
|
let value = pickedFeature.getProperty("name");
|
let cartographic =
|
window.Viewer.scene.globe.ellipsoid.cartesianToCartographic(
|
pickedFeature.content.tile.boundingSphere.center
|
);
|
let lng = Cesium.Math.toDegrees(cartographic.longitude);
|
let lat = Cesium.Math.toDegrees(cartographic.latitude);
|
this.formInline.modelId = value;
|
this.formInline.lng = lng;
|
this.formInline.lat = lat;
|
}
|
}
|
}
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
},
|
finishSelect() {
|
this.showtableList = !this.showtableList;
|
pickedFeature && (pickedFeature.color = Cesium.Color.WHITE);
|
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
},
|
updateBind() {
|
// console.log(this.itemInfomation[0].tabletype);
|
if (this.itemInfomation[0].tabletype == "busDeviceMain") {
|
let obj = {
|
bdmId: this.itemInfomation[0].bdmId,
|
bdmLocation: `${this.formInline.lng}, ${this.formInline.lat}`,
|
modelId: this.formInline.modelId,
|
status: 1,
|
};
|
updatebusDeviceMainlist(obj).then((res) => {
|
if (res.data.code === 200) {
|
this.$message({
|
type: "success",
|
message: "成功!",
|
});
|
this.backList();
|
}
|
});
|
handler && handler.destroy();
|
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
} else if (this.itemInfomation[0].tabletype == "busProductionDevice") {
|
let obj = {
|
id: this.itemInfomation[0].id,
|
bindLocation: `${this.formInline.lng}, ${this.formInline.lat}`,
|
modelId: this.formInline.modelId,
|
status: 1,
|
};
|
updatebusProductionDevicelist(obj).then((res) => {
|
if (res.data.code === 200) {
|
this.$message({
|
type: "success",
|
message: "成功!",
|
});
|
this.backList();
|
}
|
});
|
handler && handler.destroy();
|
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
}
|
},
|
|
backList() {
|
pickedFeature && (pickedFeature.color = Cesium.Color.WHITE);
|
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
handler && handler.destroy();
|
this.$store.commit("showBindBox", true);
|
this.$store.commit("showBindInfoBox", false);
|
},
|
initData() {
|
//是否绑定过模型
|
if (
|
this.$store.state.binditemInfo.modelId !== null &&
|
this.$store.state.binditemInfo.modelId !== ""
|
) {
|
let arr = this.$store.state.binditemInfo.bdmLocation.split(",");
|
let lng = parseFloat(arr[0]);
|
let lat = parseFloat(arr[1]);
|
this.formInline.modelId = this.$store.state.binditemInfo.modelId;
|
this.formInline.lng = lng;
|
this.formInline.lat = lat;
|
} else {
|
return;
|
}
|
},
|
},
|
|
created() {
|
this.initData();
|
this.itemInfomation[0] = this.$store.state.binditemInfo;
|
if (this.$store.state.binditemInfo.bdmId) {
|
this.itemInfomation[0].tabletype = "busDeviceMain";
|
} else if (this.$store.state.binditemInfo.id) {
|
this.itemInfomation[0].tabletype = "busProductionDevice";
|
}
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.list {
|
width: 1200px;
|
background: rgba(255, 255, 255, 0.8);
|
.header_box {
|
padding: 8px;
|
background: rgba(0, 0, 0, 0.9);
|
color: #fff;
|
span {
|
font-size: 15px;
|
}
|
}
|
.content {
|
padding: 10px 20px;
|
.search {
|
display: flex;
|
/deep/ .el-form-item {
|
margin-bottom: 8px;
|
}
|
.table_box {
|
background-color: #bfa;
|
}
|
// .demo-form-inline {
|
// // display: flex;
|
// // justify-content: space-between;
|
// // flex-wrap: wrap;
|
// .form_box1 {
|
// display: flex;
|
// justify-content: space-between;
|
// flex-wrap: wrap;
|
// }
|
// .form_box2 {
|
// display: flex;
|
// justify-content: space-between;
|
// flex-wrap: wrap;
|
// }
|
// }
|
}
|
.btn_box {
|
margin-top: 20px;
|
display: flex;
|
justify-content: space-around;
|
}
|
}
|
}
|
</style>
|
