<template>
|
<div class="modelBox" v-drag>
|
<div>
|
<div class="modleTitle ">
|
<div>桩号查询</div>
|
<div class="modelClose" @click="$store.state.isShowMenuQuery = false"> X</div>
|
</div>
|
</div>
|
<div class="modelContent">
|
<div>
|
<el-select v-model="formInline.type" @change="setTypeChange" placeholder="请选择" style="width: 100%;">
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="contentBox" label-width="80px">
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
<el-form-item label="桩号:" v-if="formInline.type != '2'">
|
<!-- <el-input v-model="formInline.zhuangHao" style="width: 270px" placeholder="请输入桩号..."></el-input> -->
|
<el-autocomplete class="inline-input" v-model="formInline.zhuangHao" :fetch-suggestions="querySearch"
|
placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>
|
</el-form-item>
|
<el-form-item label="经度:" v-if="formInline.type == '2'">
|
<el-input v-model="formInline.lon" style="width: 270px" placeholder="请输入经度或拾取坐标..."></el-input>
|
</el-form-item>
|
<el-form-item label="维度:" v-if="formInline.type == '2'">
|
<el-input v-model="formInline.lat" style="width: 270px" placeholder="请输入维度或拾取坐标..."></el-input>
|
</el-form-item>
|
<el-form-item>
|
<div class="contentButton">
|
<el-button size="small" @click="$store.state.isQueryFalag = true" v-show="formInline.type == '2'">拾取
|
</el-button>
|
<el-button size="small" @click="setQuery">查询</el-button>
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
</div>
|
<div class="queryBox" v-show="queryData.length > 0" v-for="(item, key) in queryData" :key="key">
|
<div>
|
{{ item.name }}
|
</div>
|
<div>
|
:
|
</div>
|
<div>
|
{{ item.val }}
|
</div>
|
</div>
|
</div>
|
|
|
</div>
|
</template>
|
|
<script>
|
import model from '../../../assets/js/Layer/model';
|
import zhData from '../../../assets/js/Layer/zhuanghao';
|
import { kuanDeng_mp_getMpByLocation } from '../../../api/api'
|
|
export default {
|
name: "modelQuery",
|
components: {},
|
|
computed: {
|
Obj() {
|
return this.$store.state.isQyeryCoord;
|
},
|
},
|
watch: {
|
Obj(newVal, oldVal) {
|
|
if (newVal) {
|
this.formInline.lon= newVal.longitude;
|
this.formInline.lat= newVal.latitude;
|
this.$store.state.isQueryFalag = false;
|
this.$store.state.isQyeryCoord = null;
|
}
|
},
|
},
|
data() {
|
return {
|
options: [{
|
value: '1',
|
label: '桩号查询'
|
}, {
|
value: '2',
|
label: '坐标查询'
|
}],
|
|
formInline: {
|
type: '1',
|
zhuangHao: "",
|
lon: "",
|
lat: ""
|
},
|
restaurants: [],
|
queryData: [],
|
};
|
},
|
mounted() {
|
this.setLayerStart();
|
},
|
destroyed() {
|
|
},
|
methods: {
|
setTypeChange() {
|
this.formInline.zhuangHao = "";
|
this.formInline.lon = "";
|
this.formInline.lat = "";
|
this.queryData = [];
|
},
|
setQuery() {
|
var coord = null;
|
if (this.formInline.type == '1') {
|
coord = this.getQueryItem(this.formInline.zhuangHao);
|
} else {
|
coord={
|
lon:this.formInline.lon,
|
lat:this.formInline.lat
|
}
|
}
|
if (!coord) return;
|
this.getQueryMessageInfo(coord)
|
|
},
|
async getQueryMessageInfo(coord) {
|
this.queryData = [];
|
const data = await kuanDeng_mp_getMpByLocation(coord)
|
if (data.status == 200 && data.data.result.length > 0) {
|
var val = data.data.result[0];
|
if (!val.LINK_CODE) return;
|
|
for (var key in val) {
|
var qval = null;
|
if (key === "UP_DOWN") {
|
|
if (val[key] == '1') {
|
qval = '上行'
|
} else if (val[key] == '2') {
|
qval = '下行'
|
}
|
} else {
|
qval = val[key]
|
}
|
this.queryData.push({
|
name: key,
|
val: qval
|
})
|
}
|
}
|
if (this.queryData.length > 0 && this.formInline.type == '1') {
|
Viewer.camera.flyTo({
|
destination: Cesium.Cartesian3.fromDegrees(
|
coord.lon,
|
coord.lat,
|
300
|
),
|
orientation: {
|
heading: 0,
|
pitch: Cesium.Math.toRadians(-80.0),
|
roll: 0,
|
},
|
|
});
|
}
|
|
},
|
getQueryItem(res) {
|
|
for (var i in this.restaurants) {
|
|
if (this.restaurants[i].value === res) {
|
var coord = this.restaurants[i];
|
return {
|
lon: coord.lon,
|
lat: coord.lat,
|
alt: coord.alt
|
};
|
}
|
}
|
return null;
|
},
|
setLayerStart() {
|
this.restaurants = zhData.data;
|
},
|
querySearch(queryString, cb) {
|
var restaurants = this.restaurants;
|
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
// 调用 callback 返回建议列表的数据
|
cb(results);
|
},
|
handleSelect(item) {
|
|
this.queryItem = item;
|
},
|
createFilter(queryString) {
|
return (restaurant) => {
|
|
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
};
|
},
|
}
|
};
|
</script>
|
|
<style scoped lang="less">
|
.modelBox {
|
width: 360px;
|
height: 60%;
|
border: 1px solid white;
|
top: 70px;
|
right: 20px;
|
background-color: rgba(0, 0, 0, 0.6); // #0048fd69 !important
|
z-index: 9999;
|
position: absolute;
|
|
.modleTitle {
|
height: 42px;
|
width: 90%;
|
background: #0048fd69 !important;
|
border-bottom: 1px solid white;
|
color: white;
|
font-weight: 700px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0% 5%;
|
|
.modelClose {
|
height: 16px;
|
width: 16px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: rgba(128, 128, 128, 0.6);
|
font-size: 14x;
|
}
|
}
|
|
.modelContent {
|
|
width: 90%;
|
height: calc(95% - 42px);
|
margin: 5%;
|
|
/deep/.el-form-item__label {
|
color: white;
|
}
|
|
.contentBox {
|
padding: 10px 0px;
|
}
|
|
.contentButton {
|
width: 325px;
|
display: flex;
|
justify-content: center;
|
}
|
|
.queryBox {
|
display: flex;
|
color: white;
|
|
div {
|
line-height: 40px;
|
}
|
|
}
|
}
|
}
|
</style>
|
