<template>
|
<div class="FX_box">
|
<div class="FX_title">三维污染物</div>
|
<div class="form_box">
|
<div class="inp_box">
|
<span>监测点选择</span>
|
<el-select
|
v-model="data.SJvalue"
|
class="m-2"
|
size="large"
|
@change="selectChange"
|
>
|
<el-option
|
v-for="item in optionsPOI"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</div>
|
|
<div class="inp_box">
|
<span>时间选择</span>
|
<el-date-picker
|
size="large"
|
v-model="selectform.value"
|
type="datetime"
|
@change="changeTime"
|
value-format="YYYY-MM-DD HH"
|
/>
|
</div>
|
<div class="button_box">
|
<el-button size="small" @click="selectList">确认</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { reactive, onMounted, watch, ref } from "vue";
|
import { useStore } from "vuex";
|
import {
|
locationControllerQ,
|
threedreliController,
|
threedreliControllerbyt,
|
} from "@/api/api.js";
|
|
import { ElMessage } from "element-plus";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
setup() {
|
const store = useStore();
|
let data = reactive({
|
SJvalue: "",
|
});
|
const selectform = reactive({
|
value1: [],
|
value: "",
|
});
|
let optionsPOI = ref([]);
|
|
//网格名称选择框
|
// const getWGname = () => {
|
// let arr = [];
|
// optionsPOI = [];
|
// store.state.jkList.forEach((e) => {
|
// optionsPOI.value.push({ value: e.name, label: e.name });
|
// });
|
// // optionsPOI = arr;
|
|
// };
|
const getWGname = async () => {
|
// const dt = await locationControllerQ({ type: "监控点" });
|
// const dt1 = await locationControllerQ({ type: "超级站" });
|
const dt = await locationControllerQ({ type: "监控点" });
|
const dt1 = await locationControllerQ({ type: "超级站" });
|
let arr = [...dt.result, ...dt1.result];
|
|
arr.forEach((e) => {
|
optionsPOI.value.push({
|
value: e.name,
|
label: e.name,
|
x: e.lon,
|
y: e.lat,
|
});
|
});
|
};
|
//多层热力图
|
const getDHeat = async (val) => {
|
sgworld.Core.postMessage({ duoceng: "delete" });
|
// const dt = await threedreliController({ name: val });
|
// const dt = await threedreliControllerbyt({
|
// name: val,
|
// startTime: selectform.value,
|
// endOfTime: selectform.value,
|
// });
|
const dt = await threedreliControllerbyt({
|
name: val,
|
date: selectform.value,
|
});
|
|
let Narr = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90];
|
let arr = [];
|
Narr.forEach((e) => {
|
dt.result.forEach((v) => {
|
arr.push({
|
vocs: v[`height${e}`],
|
toumingdu: 0.8,
|
lon: v.lon,
|
lat: v.lat,
|
high: 300 + e,
|
});
|
});
|
});
|
sgworld.Core.postMessage({
|
duoceng: "gezi",
|
duocengarr: arr,
|
toumingdu: 2,
|
});
|
// sgworld.Core.postMessage({ type: "yincang", Hs: "show", id: -1 });
|
};
|
const selectList = async () => {
|
if (selectform.value == "" || selectform.value == null) {
|
return ElMessage.error("请选择时间段");
|
}
|
optionsPOI.value.forEach((e) => {
|
if (e.value == data.SJvalue) {
|
sgworld.Navigate.flyToPosition(e.x, e.y - 0.003, 500, {
|
heading: -90,
|
pitch: -30,
|
roll: 0,
|
});
|
}
|
});
|
getDHeat(data.SJvalue);
|
};
|
const selectChange = (val) => {};
|
getWGname();
|
function changeTime(value) {
|
// if (value == null) {
|
// selectform.value = "";
|
// }
|
}
|
onMounted(() => {});
|
return {
|
data,
|
selectList,
|
selectChange,
|
getWGname,
|
optionsPOI,
|
selectform,
|
changeTime,
|
};
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.FX_box {
|
width: calc(742px * 1.5);
|
height: calc(200px * 1);
|
position: absolute;
|
right: 70px;
|
top: 490px;
|
background: url("../assets/img/d.png") no-repeat center;
|
background-size: 100% 100%;
|
padding: 40px;
|
box-sizing: border-box;
|
.FX_title {
|
font-size: 30px;
|
font-weight: bold;
|
color: #ffffff;
|
padding-bottom: 30px;
|
}
|
}
|
.form_box {
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
.inp_box {
|
span {
|
font-size: 24px;
|
font-weight: 400;
|
color: #ffffff;
|
padding-right: 10px;
|
}
|
/deep/ .el-input__wrapper {
|
width: 460px;
|
background: rgba(0, 0, 0, 0.2);
|
border: 2px solid #2e58cc;
|
border-radius: 10px;
|
color: #ffffff;
|
padding: 0;
|
padding-left: 3px;
|
}
|
/deep/ .el-input__inner,
|
/deep/ .el-textarea__inner {
|
// background-color: rgba(134, 132, 132, 0.5);
|
color: #ffffff;
|
font-size: 24px;
|
}
|
/deep/.el-range-input {
|
color: white;
|
}
|
/deep/ .el-range-separator {
|
color: white;
|
}
|
.el-select {
|
width: 180px;
|
}
|
.el-select /deep/ .el-input__wrapper {
|
background: rgba(0, 0, 0, 0.2);
|
border: 2px solid #2e58cc;
|
border-radius: 10px;
|
color: #ffffff;
|
padding: 0;
|
padding-left: 6px;
|
}
|
.el-select /deep/ .el-input__inner {
|
color: #ffffff;
|
font-size: 24px;
|
}
|
}
|
}
|
.el-button {
|
background: rgba(0, 0, 0, 0.2);
|
border: 2px solid #2e58cc;
|
border-radius: 10px;
|
color: #ffffff;
|
}
|
</style>
|
