<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="inquireContent_input" v-show="pixelIsShow">
|
<!-- <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">
|
<div class="label">范围框内最大像素值</div>
|
<el-select
|
v-model="ScopeBox.pixel"
|
class="m-2"
|
placeholder="像素值"
|
size="small"
|
@change="pixelChange"
|
>
|
<el-option
|
v-for="item in pixeloptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</div>
|
</div>
|
<div class="chart" v-if="chartIsshow">
|
<div class="chart_box">
|
<div class="chart_btn">
|
<el-button
|
:icon="Search"
|
link
|
class="linkBtn"
|
@click="openDialog"
|
></el-button>
|
|
<el-button :icon="Download" link class="linkBtn"></el-button>
|
<el-button
|
:icon="Delete"
|
link
|
class="del linkBtn"
|
></el-button>
|
</div>
|
<Bar-graph :width="'100%'" :height="'260px'"></Bar-graph>
|
</div>
|
<div class="select_box">
|
<el-select
|
v-model="layerValue"
|
class="m-2"
|
placeholder="选择图层"
|
size="small"
|
>
|
<el-option
|
v-for="item in layeroptions"
|
: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" v-if="!chartIsshow">
|
<el-button link @click="download">下载分析结果</el-button>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</div>
|
<div class="dialog" v-if="dialogShow" @click.self="dialogShow = false">
|
<div class="chart">
|
<i @click.capture="closeDialog"
|
><el-icon><Close /></el-icon
|
></i>
|
<BarGraphAxisLine :width="'856px'" :height="'636px'"></BarGraphAxisLine>
|
</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 BarGraphAxisLine from "@/components/BarGraphAxisLine.vue";
|
import { saveFSDZJsonToExcel } from "@/utils/downloadCSV.js";
|
import { selectByPoint, selectByPolygon, selectByPolyline } from "@/api/api";
|
import { ElMessage } from "element-plus";
|
import { Search, Delete, Download } from "@element-plus/icons-vue";
|
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",
|
});
|
let layerValue = ref("");
|
const layeroptions = [
|
{
|
value: "图层名称",
|
label: "图层名称",
|
},
|
{
|
value: "图层名称",
|
label: "图层名称",
|
},
|
{
|
value: "图层名称",
|
label: "图层名称",
|
},
|
];
|
const pixeloptions = [
|
{
|
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([]);
|
let dialogShow = ref(false);
|
//关闭
|
const closeDialog = () => {
|
dialogShow.value = false;
|
// alert(1);
|
};
|
//打开
|
const openDialog = () => {
|
dialogShow.value = true;
|
};
|
//像素选择
|
const pixelChange = (val) => {
|
if (store.state.plottingInquireData.entitiesData.icon == "d.png") {
|
selectPoint({
|
pixel: val,
|
wkt: store.state.plottingInquireData.entitiesData.wkt,
|
});
|
}
|
};
|
//下载csv
|
const download = () => {
|
saveFSDZJsonToExcel(resultList.value, "123", "");
|
};
|
//点查询接口
|
const selectPoint = async (res) => {
|
resultList.value = [];
|
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) => {
|
resultList.value = [];
|
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);
|
// 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 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: nVal.entitiesData.wkt,
|
});
|
}
|
if (nVal.entitiesData.icon == "m.png") {
|
chartIsshow.value = false;
|
if (nVal.entitiesData.name == oVal.entitiesData.name) {
|
return;
|
}
|
pixelIsShow.value = false;
|
selectPolygon({ wkt: nVal.entitiesData.wkt });
|
}
|
if (nVal && nVal.entitiesData.icon == "d.png") {
|
chartIsshow.value = false;
|
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;
|
}
|
}
|
.chart {
|
width: 100%;
|
}
|
.chart_box {
|
width: 100%;
|
.chart_btn {
|
display: flex;
|
justify-content: flex-end;
|
margin: 0 10px;
|
padding-top: 5px;
|
padding-bottom: 5px;
|
// border-bottom: 1px solid rgba(214, 228, 255, 0.4);
|
.linkBtn {
|
color: #d6e4ff;
|
}
|
.del {
|
color: red;
|
}
|
}
|
}
|
.select_box {
|
display: flex;
|
justify-content: center;
|
padding-bottom: 20px;
|
}
|
}
|
}
|
.dialog {
|
position: absolute;
|
top: 0;
|
height: 0;
|
width: 100vw;
|
height: 100vh;
|
background-color: rgba(255, 255, 255, 0.4);
|
z-index: 110;
|
.chart {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background-color: rgb(33, 37, 44);
|
padding: 20px;
|
i {
|
position: absolute;
|
right: 2px;
|
top: 2px;
|
color: #fff;
|
font-size: 14px;
|
cursor: pointer;
|
}
|
}
|
}
|
</style>
|
