<template>
|
<div class="bot" v-if="showfield">
|
<div class="slidePanel">
|
<div class="block">
|
<span class="demonstration">默认</span>
|
<el-slider v-model="value1"></el-slider>
|
</div>
|
</div>
|
<div class="top1Panel">
|
<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.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.height"></el-input>
|
</el-form-item>
|
<el-form-item label="覆盖半径:">
|
<el-input v-model="form.radius"></el-input>
|
</el-form-item>
|
</el-form>
|
<div class="btns">
|
<span @click="reset">重置</span>
|
<span @click="analysis">分析</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="showpic" v-if="showpic"></div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
intensity,
|
getbounds,
|
createPic,
|
picurl,
|
DynamicMap,
|
} from "../../api/http";
|
import bus from "../../utils/bus";
|
let Base64 = require("js-base64").Base64;
|
export default {
|
data() {
|
return {
|
form: {
|
name: "ITU-R P.1546 模型(30MHz-3GHz)",
|
height: 10,
|
radius: 100,
|
},
|
showfield: false,
|
imageid: null,
|
showpic: false,
|
};
|
},
|
mounted() {
|
// bus.$on("DynamicMap", e => {
|
// this.showfield = e;
|
// });
|
},
|
methods: {
|
close() {
|
this.showfield = false;
|
},
|
analysis() {
|
if (this.imageid) {
|
window.layers.remove(window.layers.get(this.imageid));
|
this.imageid = null;
|
}
|
var that = this;
|
|
//频段占用分布图
|
let data_dy = {
|
startTime: 20160608000000,
|
endTime: null,
|
startFreq: 87000000,
|
endFreq: 108000000,
|
freqType: 1,
|
};
|
const loading = that.$loading({
|
lock: true,
|
text: "计算中",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
DynamicMap(data_dy)
|
.then((res) => {
|
if (res.message === "Success") {
|
// debugger
|
// for(var i=0;i<res.rows.length;i++){
|
// //shanchu
|
|
// res.rows[i].url;
|
// }
|
getbounds({ file: Base64.encode(res.data.url) })
|
.then((res1) => {
|
if (res1.message === "Success") {
|
let points = res1.data.points;
|
let datapic = {
|
colorSchemes: 1,
|
file: Base64.encode(res.data.url),
|
maxColor: "FF0000",
|
maxValue: 100,
|
minColor: "0000FF",
|
minValue: 0,
|
};
|
createPic(datapic).then((res2) => {
|
if (res2.message === "Success") {
|
let imagev = new Cesium.SingleTileImageryProvider({
|
url:
|
"http://221.224.53.36:9081/calc/picurl?file=" +
|
Base64.encode(res2.data),
|
rectangle: Cesium.Rectangle.fromDegrees(
|
points[0].x,
|
points[0].y,
|
points[1].x,
|
points[1].y
|
),
|
});
|
imagev.defaultAlpha = 0.5;
|
that.imageid =
|
window.layers.addImageryProvider(imagev)._layerIndex;
|
loading.close();
|
that.$message({
|
message: "计算成功",
|
type: "success",
|
});
|
that.showpic = true;
|
}
|
});
|
}
|
})
|
.catch((error) => {
|
loading.close();
|
})
|
.catch((error) => {
|
loading.close()
|
});
|
}
|
})
|
.catch((error) => {
|
loading.close();
|
});
|
},
|
reset() {
|
//重置
|
if (this.imageid) {
|
window.layers.remove(window.layers.get(this.imageid));
|
this.imageid = null;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.top1Panel {
|
width: 800px;
|
transform: translate(2000px, 200px);
|
height: 700px;
|
background: url(~@/assets/image/test/圆角矩形.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
position: absolute;
|
left: 2120px;
|
top: 480px;
|
}
|
.top1 {
|
width: 91%;
|
height: 14%;
|
font-size: 35px;
|
font-weight: bold;
|
margin: 0px auto;
|
border-bottom: 2px solid #fff;
|
color: #fff;
|
letter-spacing: 3px;
|
}
|
.icon {
|
position: absolute;
|
left: 73px;
|
width: 40px;
|
height: 40px;
|
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: 90px;
|
}
|
.close {
|
position: absolute;
|
font-size: 40px;
|
right: 60px;
|
top: 25px;
|
}
|
.close:hover {
|
color: red;
|
transition: color 1s;
|
cursor: pointer;
|
}
|
.next {
|
width: 89%;
|
height: 79%;
|
margin: 0 auto;
|
}
|
.next >>> .el-form-item {
|
margin-top: 40px;
|
}
|
.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: 50px;
|
width: 100%;
|
height: 70px;
|
transform: translateX(-0px);
|
display: flex;
|
justify-content: center;
|
}
|
.btns > span {
|
display: block;
|
width: 200px;
|
height: 70px;
|
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/colorget.jpg);
|
background-position: center;
|
background-size: 100% 100%;
|
position: absolute;
|
top: 1200px;
|
right: 50px;
|
}
|
.slidePanel {
|
top: 2000px;
|
left: 400px;
|
border-radius: 10px;
|
border: 1px solid #888;
|
height: 50px;
|
position: absolute;
|
width: 80%;
|
}
|
</style>
|
