<template>
|
<div class="bot" v-if="showfield">
|
<div class="top1">
|
<span class="botcon">
|
<span class="icon"></span>
|
<span class="text">场强覆盖评估(多选)</span>
|
</span>
|
<span class="close" @click="close">x</span>
|
</div>
|
<div class="next">
|
<el-form ref="form" :model="form" label-width="220px">
|
<el-form-item label="区域:" prop="name">
|
<el-select
|
v-model="form.points"
|
placeholder="请选择活动区域"
|
@change="changeplase"
|
>
|
<el-option
|
v-for="(item, index) in region"
|
:key="index"
|
:label="item.vname"
|
:value="item.vlatlngs"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="场景:" prop="scene">
|
<el-select v-model="form.scene" placeholder="请选择活动区域">
|
<el-option label="上海" value="shanghai"></el-option>
|
<el-option label="广州" value="guangzhou"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="选择台站:">
|
<el-row>
|
<el-button type="primary" @click="SelectTZ" style="margin: auto"
|
>选择</el-button
|
>
|
<el-input
|
type="textarea"
|
:autosize="{ minRows: 2 }"
|
v-model="form.selecttz"
|
style="width: 85%; font-size: 20px"
|
>
|
<i slot="suffix" style="margin-right: 10px; font-size: 35px"></i>
|
</el-input>
|
</el-row>
|
</el-form-item>
|
<el-form-item label="传播模型:" prop="name">
|
<el-select v-model="form.name" placeholder="请选择活动区域">
|
<el-option
|
label="ITU-R P.452模型(100MHz-50GHz)"
|
value="ITU-R P.452模型(100MHz-50GHz)"
|
></el-option>
|
<el-option
|
label="ITU-R P.1546 模型(30MHz-3GHz)"
|
value="ITU-R P.1546 模型(30MHz-3GHz)"
|
></el-option>
|
<el-option label="自动匹配" value="自动匹配"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="接收高度:">
|
<el-input v-model="form.rxAntHeight"
|
><i slot="suffix" style="margin-right: 10px; font-size: 35px"
|
>M</i
|
></el-input
|
>
|
</el-form-item>
|
<el-form-item label="覆盖半径:">
|
<el-input v-model="form.coverageRedius_km"
|
><i slot="suffix" style="margin-right: 10px; font-size: 35px"
|
>Km</i
|
></el-input
|
>
|
</el-form-item>
|
</el-form>
|
<div class="btns">
|
<span @click="reset">重置</span>
|
<span @click="analysis">分析</span>
|
</div>
|
</div>
|
<div class="showpic" v-if="showpic">
|
<div :style="innerbac" @click="openDia"></div>
|
</div>
|
<changePic @colordata="getdata" />
|
</div>
|
</template>
|
|
<script>
|
let hander, divPoint3;
|
import { moreTZ, getbounds, createPic, picurl, showCQ } from "../../api/http";
|
import bus from "../../utils/bus";
|
|
import changePic from "../common/color.vue";
|
let Base64 = require("js-base64").Base64;
|
export default {
|
components: {
|
changePic,
|
},
|
data() {
|
return {
|
form: {
|
points: null,
|
stationList: [],
|
selecttz: "",
|
scene: "",
|
name: "ITU-R P.1546 模型(30MHz-3GHz)",
|
rxAntHeight: 10,
|
coverageRedius_km: 10,
|
},
|
nowplay: "",
|
region: [],
|
showfield: false,
|
imageid: null,
|
showpic: false,
|
startshow: false,
|
colorContainer: {},
|
innerbac: {
|
width: "30%",
|
height: "70%",
|
border: "1px solid #000",
|
transform: "translate(40px,90px)",
|
backgroundImage:
|
"url(" + require("@/assets/image/botbtn/color.png") + ")",
|
backgroundPosition: "center",
|
backgroundSize: ` 100% 100%`,
|
},
|
};
|
},
|
mounted() {
|
bus.$on("showdio", (e) => {
|
this.showfield = e == "1-2";
|
});
|
bus.$on("clearEve", (e) => {
|
this.reset();
|
});
|
//获得区域数据
|
bus.$on("areaData", (e) => {
|
this.region = e;
|
});
|
bus.$on("showMoreTZ", (e) => {
|
let str;
|
e.forEach((item) => {
|
str ? (str = str + "," + item.name) : (str = item.name);
|
});
|
this.form.selecttz = str;
|
});
|
},
|
methods: {
|
changeplase(value) {
|
if (JSON.parse(value)[0][1] < 118) {
|
window.Viewer.camera.flyTo({
|
destination: Cesium.Cartesian3.fromDegrees(
|
113.29503528791071,
|
23.104708355136264,
|
4109.8492337442767
|
),
|
orientation: {
|
heading: 0.8349372341578318,
|
pitch: -0.85222154573481174,
|
roll: 0,
|
},
|
});
|
} else {
|
window.Viewer.camera.flyTo({
|
destination: Cesium.Cartesian3.fromDegrees(
|
121.23142475566037,
|
30.314431916707203,
|
101204.78027978493
|
),
|
orientation: {
|
heading: 0.149372341578318,
|
pitch: -0.8022154573481174,
|
roll: 0,
|
},
|
});
|
}
|
},
|
getdata(data) {
|
this.colorContainer = data;
|
},
|
openDia() {
|
bus.$emit("changeColor", true);
|
},
|
close() {
|
this.showfield = false;
|
},
|
SelectTZ() {
|
window.allowClick = true;
|
// if (window.stationList.length > 0) {
|
// window.stationList = [];
|
// this.form.stationList = [];
|
// this.form.stationListvalue = "";
|
// }
|
},
|
analysis() {
|
// this.close();
|
let that = this;
|
if (that.imageid) {
|
window.Viewer.entities.removeById(that.imageid);
|
that.imageid = null;
|
}
|
// window.showtable = true;
|
if (window.stationList.length > 0) {
|
let arr = [];
|
window.stationList.forEach((item) => {
|
arr.push(item.id);
|
});
|
let obj = {
|
corverageType: 1,
|
coverageRedius_km: that.form.coverageRedius_km,
|
coverageThreshold: -100,
|
freqEnd: "",
|
freqStart: "",
|
model: that.form.name == "ITU-R P.1546 模型(30MHz-3GHz)" ? 2 : 41,
|
noiseTemp: 293,
|
points: that.form.points,
|
rxAntGain_dBi: 10,
|
rxAntHeight: that.form.rxAntHeight,
|
scene: that.form.scene,
|
stationList: arr,
|
type: "1",
|
};
|
const loading = that.$loading({
|
lock: true,
|
text: "计算中",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
moreTZ(obj)
|
.then((res) => {
|
if (res.message === "Success") {
|
let points = res.data.bounds;
|
let obj = {
|
colorSchemes: 1,
|
file: Base64.encode(res.data.url),
|
maxColor: "FF0000",
|
maxValue: 120,
|
minColor: "0000FF",
|
minValue: -100,
|
showBounds: that.form.points,
|
};
|
obj = { ...obj, ...this.colorContainer };
|
obj.minValue = -100;
|
that.nowplay = Base64.encode(res.data.url);
|
createPic(obj).then((res2) => {
|
let rectangle = sgworld.Creator.addSimpleGraphic("rectangle", {
|
removeEdit: true,
|
coordinates: Cesium.Rectangle.fromDegrees(
|
points.xmin,
|
points.ymin,
|
points.xmax,
|
points.ymax
|
),
|
color: "rgba(255,255,255,0.5)",
|
image:
|
"http://221.224.53.36:9081/calc/picurl?file=" +
|
Base64.encode(res2.data),
|
});
|
that.getTaishi();
|
if (that.imageid) {
|
window.Viewer.entities.removeById(that.imageid);
|
that.imageid = null;
|
}
|
that.imageid = rectangle.id;
|
|
loading.close();
|
that.$message({
|
message: "计算成功",
|
type: "success",
|
});
|
that.showpic = true;
|
});
|
}
|
})
|
.catch((error) => {
|
loading.close();
|
});
|
}
|
},
|
reset() {
|
try {
|
Object.assign(this.$data.form, this.$options.data().form);
|
window.stationList = [];
|
window.Viewer.entities.removeById(this.imageid);
|
this.startshow = false;
|
divPoint3.deleteObject();
|
divPoint3 = null;
|
hander &&
|
hander.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
hander = null;
|
this.imageid = null;
|
} catch (error) {}
|
},
|
// 点击获得态势
|
getTaishi() {
|
let that = this;
|
if (hander) {
|
return;
|
}
|
hander = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
|
let pickFeature;
|
// 鼠标点击事件
|
let obj = {
|
analysisAction: "-1",
|
analysisType: 1, //这个值可能和列表选择有关 目前锁定地址的
|
filename: that.nowplay,
|
};
|
hander.setInputAction(function (movement) {
|
let position = sgworld.Navigate.getMouseDegrees(movement.position);
|
obj.lat = position.lat;
|
obj.lng = position.lon;
|
showCQ(obj).then((res) => {
|
let data = res.data;
|
if (divPoint3) {
|
divPoint3.deleteObject();
|
divPoint3 = null;
|
}
|
if (data != "无数据") {
|
divPoint3 = sgworld.Creator.createDivPoint(
|
"合肥",
|
{ lon: obj.lng, lat: obj.lat },
|
{
|
type: "custom",
|
offset: ["c", 60],
|
description: `
|
<div class="divPoint-custom">
|
<p>${data}</p>
|
</div>
|
`,
|
near: 0,
|
far: 100000,
|
}
|
);
|
}
|
});
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
},
|
},
|
watch: {
|
colorContainer: {
|
deep: true,
|
handler(data) {
|
let colornow = {
|
width: "30%",
|
height: "70%",
|
border: "1px solid #000",
|
transform: "translate(40px,90px)",
|
backgroundImage: `linear-gradient(${data.maxColor},${data.minColor})`,
|
};
|
this.innerbac = colornow;
|
},
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.bot {
|
width: 1000px;
|
height: 1300px;
|
background: url(~@/assets/image/test/22.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
position: absolute;
|
left: 3920px;
|
top: 480px;
|
}
|
.top1 {
|
width: 96%;
|
height: 11%;
|
font-size: 45px;
|
font-weight: bold;
|
margin: 0px auto;
|
border-bottom: 2px solid #fff;
|
color: #fff;
|
letter-spacing: 3px;
|
}
|
.icon {
|
position: absolute;
|
left: 73px;
|
width: 50px;
|
height: 50px;
|
top: 39px;
|
background-size: 100% 100% !important;
|
background-repeat: no-repeat !important;
|
background-position: center !important;
|
background: url(~@/assets/image/subject/题标.png);
|
}
|
.text {
|
display: inline-block;
|
margin-left: 110px;
|
}
|
.next >>> .el-select {
|
width: 670px;
|
}
|
.close {
|
position: absolute;
|
font-size: 45px;
|
font-weight: 400;
|
right: 60px;
|
top: 25px;
|
}
|
.close:hover {
|
color: red;
|
transition: color 1s;
|
cursor: pointer;
|
}
|
.next {
|
width: 89%;
|
height: 79%;
|
margin: 30px auto;
|
}
|
.next >>> .el-form-item {
|
}
|
.next >>> .el-input {
|
width: 84%;
|
}
|
.next >>> .el-date-editor {
|
width: 390px;
|
}
|
.next >>> .el-form-item__label {
|
color: #fff;
|
font-size: 40px;
|
}
|
.next >>> .el-input__inner {
|
font-size: 30px;
|
}
|
.next >>> .el-form-item__error {
|
font-size: 30px;
|
font-weight: 700;
|
}
|
.botcon {
|
display: inline-block;
|
margin-top: 34px;
|
}
|
.btns {
|
margin-top: 30px;
|
width: 100%;
|
height: 70px;
|
transform: translateX(-0px);
|
display: flex;
|
justify-content: center;
|
}
|
.btns > span {
|
display: block;
|
width: 200px;
|
height: 70px;
|
margin: 0 40px;
|
border: 1px solid #000;
|
text-align: center;
|
font-size: 35px;
|
line-height: 70px;
|
cursor: pointer;
|
}
|
.btns > span:nth-child(3) {
|
color: #fff;
|
background-image: linear-gradient(#76c2f6, #6a9cf1);
|
}
|
.btns > span:nth-child(-n + 2) {
|
color: #000;
|
background: #cadaea;
|
}
|
.showpic {
|
width: 260px;
|
height: 400px;
|
background: url(~@/assets/image/botbtn/bac.png);
|
background-position: center;
|
background-size: 100% 100%;
|
position: absolute;
|
top: 1300px;
|
right: 50px;
|
}
|
</style>
|
