<template>
|
<div class="plottingInquire" v-if="isShow">
|
<div class="InquireHeader">标绘查询</div>
|
<div class="inquireContent">
|
<div class="inquireContent_title">用户新建要素</div>
|
<div class="inquireContent_name">
|
<div class="plotting_list_tr_name">
|
<img
|
:src="require(`../../assets/img/${inquireData.icon}`)"
|
class="ico"
|
alt=""
|
/><span>{{ inquireData.name }}</span>
|
</div>
|
<div class="plotting_list_tr_btn">
|
<div class="tr_btn dw" @click="setLayerLocation()"></div>
|
<div class="tr_btn sc" @click="setLayerRemove()"></div>
|
</div>
|
</div>
|
<div class="tab_box">
|
<el-tabs
|
v-model="activeName"
|
class="demo-tabs"
|
@tab-click="handleClick"
|
>
|
<!-- <el-tab-pane label="图层属性" name="first">User</el-tab-pane> -->
|
<el-tab-pane label="查询结果" name="second">
|
<div class="chart_box" v-if="chartIsshow">
|
<Bar-graph :width="'100%'" :height="'260px'"></Bar-graph>
|
</div>
|
<div class="inquireContent_input" v-if="!chartIsshow">
|
<!-- <div class="inquireContent_input_left">
|
<div class="label">范围框</div>
|
<el-input
|
v-model="ScopeBox.Scop"
|
size="small"
|
placeholder="范围框"
|
>
|
<template #append>km</template>
|
</el-input>
|
</div> -->
|
<div class="inquireContent_input_right" v-show="pixelIsShow">
|
<div class="label">范围框内最大像素值</div>
|
<el-select
|
v-model="ScopeBox.pixel"
|
class="m-2"
|
placeholder="像素值"
|
size="small"
|
@change="pixelChange"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</div>
|
</div>
|
<div class="inquireContent_msg" v-if="!chartIsshow">
|
<div class="inquireContent_msg_k">
|
<span>提取的边界框</span>
|
<span>{{ ScopeBox.pixel }}×{{ ScopeBox.pixel }}</span>
|
</div>
|
<!-- <div class="inquireContent_msg_k">
|
<span>使用</span>
|
<span
|
>{{ ScopeBox.Scop * 1000 }}.00,{{ ScopeBox.Scop * 1000 }}.00
|
m/px</span
|
>
|
</div> -->
|
</div>
|
<div class="inquireContent_table" v-if="!chartIsshow">
|
<div class="table">
|
<div class="table_head">
|
<div class="table_head_td">序号</div>
|
<div class="table_head_td">
|
<span> 图层名 </span>
|
<span> 分析结果 </span>
|
</div>
|
</div>
|
<div class="table_content">
|
<div class="table_tr" v-for="(e, i) in resultList" :key="i">
|
<div class="table_td">{{ i + 1 }}</div>
|
<div class="table_td">
|
<span> {{ e.layerName }}</span>
|
<span> {{ e.avg }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="download">
|
<el-button link @click="download">下载 CSV</el-button>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import menuTool from "@/assets/js/Map/menuTool";
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
watch,
|
} from "vue";
|
import { useStore } from "vuex"; // 引入useStore 方法
|
//echarts
|
import BarGraph from "@/components/BarGraph.vue";
|
import { saveFSDZJsonToExcel } from "@/utils/downloadCSV.js";
|
import { selectByPoint, selectByPolygon, selectByPolyline } from "@/api/api";
|
import { ElMessage } from "element-plus";
|
const store = useStore(); // 该方法用于返回store 实例
|
const emits = defineEmits(["setCloseplotting"]);
|
let isShow = ref(false);
|
let pixelIsShow = ref(true);
|
let inquireData = ref({
|
name: "path #9",
|
icon: "d.png",
|
});
|
const activeName = ref("second");
|
const ScopeBox = ref({
|
Scop: "",
|
pixel: "1",
|
});
|
const options = [
|
{
|
value: "1",
|
label: "1×1",
|
},
|
{
|
value: "2",
|
label: "2×2",
|
},
|
{
|
value: "4",
|
label: "4×4",
|
},
|
{
|
value: "8",
|
label: "8×8",
|
},
|
{
|
value: "16",
|
label: "16×16",
|
},
|
{
|
value: "32",
|
label: "32×32",
|
},
|
{
|
value: "64",
|
label: "64×64",
|
},
|
{
|
value: "128",
|
label: "128×128",
|
},
|
{
|
value: "256",
|
label: "256×256",
|
},
|
];
|
let resultList = ref([]);
|
//像素选择
|
const pixelChange = (val) => {
|
selectPoint({
|
pixel: val,
|
wkt: `POINT (${store.state.plottingInquireData.entitiesData.lng} ${store.state.plottingInquireData.entitiesData.lat})`,
|
});
|
};
|
//下载csv
|
const download = () => {
|
saveFSDZJsonToExcel(resultList.value, "123", "");
|
};
|
//点查询接口
|
const selectPoint = async (res) => {
|
const dt = await selectByPoint(res);
|
|
if (dt.code !== 200) {
|
return ElMessage.error("查询错误");
|
}
|
|
dt.result.forEach((e) => {
|
if (e.code != 200) {
|
e.avg = "-";
|
e.max = "-";
|
e.min = "-";
|
}
|
e.lng = store.state.plottingInquireData.entitiesData.lng;
|
e.lat = store.state.plottingInquireData.entitiesData.lat;
|
resultList.value.push(e);
|
});
|
};
|
//面查询接口
|
const selectPolygon = async (res) => {
|
const dt = await selectByPolygon(res);
|
|
dt.result.forEach((e) => {
|
if (e.code != 200) {
|
e.avg = "-";
|
e.max = "-";
|
e.min = "-";
|
}
|
e.lng = store.state.plottingInquireData.entitiesData.lng;
|
e.lat = store.state.plottingInquireData.entitiesData.lat;
|
resultList.value.push(e);
|
});
|
};
|
//线查询接口
|
const selectPolyline = async (res) => {
|
const dt = await selectByPolyline(res);
|
console.log(dt);
|
};
|
const setLayerLocation = () => {
|
var entities = Viewer.entities._entities._array;
|
for (var i in entities) {
|
if (entities[i].name == inquireData.value.name) {
|
Viewer.zoomTo(entities[i]);
|
break;
|
}
|
}
|
};
|
const setLayerRemove = () => {
|
var entities = Viewer.entities._entities._array;
|
for (var i in entities) {
|
if (entities[i].name == inquireData.value.name) {
|
Viewer.entities.remove(entities[i]);
|
// inquireData.value = {};
|
let obj = {
|
isshow: false,
|
entitiesData: { name: inquireData.value.name },
|
getData: {},
|
};
|
// store.commit("SET_plotting", obj);
|
store.state.plottingInquireData = obj;
|
isShow.value = false;
|
break;
|
}
|
}
|
};
|
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
console.log(tab, event);
|
};
|
// const setCloseplotting = () => {
|
// emits("setCloseplotting", false);
|
// };
|
let chartIsshow = ref(false);
|
watch(
|
() => store.state.plottingInquireData,
|
(nVal, oVal) => {
|
isShow.value = nVal.isshow;
|
inquireData.value = nVal.entitiesData;
|
if (nVal.entitiesData.icon == "x.png") {
|
chartIsshow.value = true;
|
// selectPolyline({
|
// pixel: ScopeBox.value.pixel,
|
// wkt: `POINT (${nVal.entitiesData.lng})`,
|
// })
|
}
|
if (nVal.entitiesData.icon == "m.png") {
|
if (nVal.entitiesData.name == oVal.entitiesData.name) {
|
return;
|
}
|
pixelIsShow.value = false;
|
selectPolygon({ wkt: nVal.entitiesData.wkt });
|
// console.log(nVal);
|
}
|
if (nVal.entitiesData.icon == "d.png") {
|
selectPoint({
|
pixel: ScopeBox.value.pixel,
|
wkt: nVal.entitiesData.wkt,
|
});
|
}
|
},
|
{ deep: true }
|
);
|
</script>
|
|
<style lang="less" scoped>
|
.plottingInquire {
|
position: absolute;
|
right: 26px;
|
top: 80px;
|
width: 320px;
|
background: rgba(7, 8, 14, 0.8);
|
z-index: 100;
|
.InquireHeader {
|
width: 100%;
|
height: 35px;
|
background: #0e151f;
|
box-shadow: 0px 0px 6px 0px #080c13,
|
0px 14px 16px 0px rgba(38, 47, 71, 0.68);
|
font-size: 16px;
|
font-weight: 400;
|
color: #d6e4ff;
|
padding: 10px;
|
box-sizing: border-box;
|
}
|
.inquireContent {
|
.inquireContent_title {
|
font-size: 14px;
|
font-weight: 400;
|
color: #d6e4ff;
|
margin-bottom: 15px;
|
margin-top: 10px;
|
padding-left: 10px;
|
}
|
.inquireContent_name {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 10px;
|
padding-bottom: 16px;
|
.plotting_list_tr_name {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.ico {
|
width: 18px;
|
height: 18px;
|
}
|
span {
|
font-size: 16px;
|
font-weight: 300;
|
color: #ffffff;
|
margin-left: 10px;
|
}
|
}
|
.plotting_list_tr_btn {
|
display: flex;
|
align-items: center;
|
.tr_btn {
|
width: 16px;
|
height: 15px;
|
cursor: pointer;
|
}
|
.dw {
|
background: url("../../assets/img/dw.png") no-repeat center;
|
background-size: 100% 100%;
|
margin-right: 18px;
|
}
|
.sc {
|
background: url("../../assets/img/sc.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
}
|
}
|
/deep/ .el-tabs__nav {
|
justify-content: center;
|
float: none;
|
}
|
/deep/ .el-tabs__item,
|
/deep/ .el-tabs__item.is-active {
|
color: #d6e4ff;
|
font-size: 16px;
|
}
|
.inquireContent_input {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-left: 10px;
|
margin-right: 10px;
|
padding-bottom: 14px;
|
border-bottom: 1px solid rgba(214, 228, 255, 0.4);
|
.inquireContent_input_left {
|
width: 45%;
|
}
|
.inquireContent_input_right {
|
width: 45%;
|
}
|
.label {
|
font-size: 14px;
|
font-weight: 400;
|
color: #d6e4ff;
|
padding-bottom: 10px;
|
}
|
}
|
.inquireContent_msg {
|
padding: 12px 18px;
|
.inquireContent_msg_k {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
span {
|
font-size: 12px;
|
font-weight: 400;
|
color: rgba(214, 228, 255, 0.8);
|
}
|
}
|
}
|
.inquireContent_table {
|
padding-right: 15px;
|
padding-left: 15px;
|
padding-bottom: 10px;
|
.table {
|
background: rgba(0, 0, 0, 0, 4);
|
border: 1px solid rgba(214, 228, 255, 0.4);
|
border-radius: 4px;
|
.table_head {
|
height: 27px;
|
background: #0e151f;
|
// box-shadow: 0px 0px 6px 0px #080c13,
|
// 0px 14px 16px 0px rgba(38, 47, 71, 0.68);
|
// border-radius: 4px 4px 0px 0px;
|
display: flex;
|
.table_head_td {
|
width: 50px;
|
font-size: 14px;
|
font-weight: 400;
|
color: #d6e4ff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-right: 1px solid rgba(214, 228, 255, 0.4);
|
box-sizing: border-box;
|
}
|
.table_head_td:nth-child(2) {
|
width: 237px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 10px;
|
border-right: 0;
|
}
|
}
|
.table_content {
|
height: 440px;
|
overflow: auto;
|
.table_tr {
|
// height: 27px;
|
display: flex;
|
background: #000000;
|
// padding: 5px 0;
|
.table_td {
|
width: 50px;
|
|
font-size: 12px;
|
font-weight: 400;
|
color: #d6e4ff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-right: 1px solid rgba(214, 228, 255, 0.4);
|
box-sizing: border-box;
|
// padding: 5px;
|
// white-space: nowrap;
|
span {
|
display: block;
|
width: 50%;
|
word-wrap: break-word;
|
// white-space: pre;
|
}
|
span:nth-child(2) {
|
display: flex;
|
justify-content: flex-end;
|
}
|
}
|
.table_td:nth-child(2) {
|
width: 237px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
// padding: 0 10px;
|
padding-left: 10px;
|
padding-right: 10px;
|
padding-top: 5px;
|
padding-bottom: 5px;
|
border-right: 0;
|
}
|
}
|
.table_tr:nth-child(2n) {
|
background: #0e151f;
|
}
|
}
|
.table_content::-webkit-scrollbar {
|
width: 8px;
|
}
|
.table_content::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
background: rgba(0, 0, 0, 0.2);
|
}
|
.table_content::-webkit-scrollbar-track {
|
border-radius: 0;
|
background: rgba(0, 0, 0, 0);
|
}
|
}
|
}
|
.download {
|
padding-right: 15px;
|
padding-left: 15px;
|
padding-bottom: 14px;
|
display: flex;
|
justify-content: flex-end;
|
.el-button {
|
font-size: 12px;
|
color: #d6e4ff;
|
}
|
}
|
}
|
}
|
</style>
|
