<template>
|
<div class="bot"
|
v-if="showsituation">
|
<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="240px">
|
<el-form-item label="区域:">
|
<el-select v-model="form.points"
|
@change="changeplase">
|
<el-option v-for="(item, index) in regions"
|
:key="index"
|
:label="item.vname"
|
:value="{ value: item.vlatlngs, label: item.vname }">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="起始时间:">
|
<el-date-picker v-model="form.startTime"
|
value-format="yyyyMMdd"
|
:picker-options="pickerOptions"
|
format="yyyy-MM-dd"
|
type="date"
|
placeholder="选择日期"
|
@change="change">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="结束时间:">
|
<el-date-picker v-model="form.endTime"
|
value-format="yyyyMMdd"
|
:picker-options="pickerOptions"
|
format="yyyy-MM-dd"
|
type="date"
|
placeholder="选择日期"
|
@change="change1">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="分析类型:">
|
<el-select v-model="form.analysisType">
|
<el-option label="频点"
|
value="1"></el-option>
|
<el-option label="频段"
|
value="2"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="无线电业务:">
|
<el-select v-model="form.radio"
|
@change="choose">
|
<el-option v-for="item in radios"
|
:key="item.value"
|
:label="item.bussName"
|
:value="item.startFreq + '-' + item.endFreq">
|
</el-option>
|
</el-select>
|
</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>
|
import { createPic,freqBandAnalysis,showCQ } from "../../api/http";
|
import changePic from "../common/color.vue";
|
import bus from "../../utils/bus";
|
import axios from "axios";
|
|
let hander,divPoint3;
|
let Base64=require("js-base64").Base64;
|
export default {
|
components: {
|
changePic,
|
},
|
data () {
|
return {
|
form: {
|
points: "",
|
startTime: new Date("2016-06-01"),
|
endTime: new Date("2016-06-30"),
|
radio: "调频广播",
|
freqStart: "87",
|
freqEnd: "108",
|
analysisType: "频点",
|
},
|
nowfile: "",
|
showsituation: false,
|
imageid: null,
|
showpic: false,
|
pickerOptions: {},
|
chooseplase: "",
|
options: [],
|
regions: [],
|
radios: [],
|
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%`,
|
},
|
showdata1: true,
|
showdata2: true,
|
showDianci: false,
|
};
|
},
|
mounted () {
|
bus.$on("clearEve",(e) => {
|
this.reset();
|
});
|
bus.$on("radioData",(e) => {
|
this.radios=e;
|
});
|
bus.$on("guanzhou",(e) => {
|
this.form.startTime=e.fromdate;
|
this.form.endTime=e.todate;
|
});
|
bus.$on("areaData",(e) => {
|
this.regions=e;
|
});
|
bus.$on("showdio",(e) => {
|
this.showsituation=e==7;
|
this.showdata1=true;
|
this.showdata2=true;
|
});
|
},
|
methods: {
|
changeplase (value) {
|
if(value.label.indexOf("广州")>-1) {
|
this.chooseplase="广州";
|
this.form.startTime=new Date("2019-10-08");
|
this.form.endTime=new Date("2019-10-16");
|
window.Viewer.camera.flyTo({
|
destination: Cesium.Cartesian3.fromDegrees(
|
113.29503528791071,
|
23.104708355136264,
|
4109.8492337442767
|
),
|
orientation: {
|
heading: 0.8349372341578318,
|
pitch: -0.85222154573481174,
|
roll: 0,
|
},
|
});
|
} else {
|
this.chooseplase="上海";
|
this.form.startTime=new Date("2016-06-01");
|
this.form.endTime=new Date("2016-06-30");
|
window.Viewer.camera.flyTo({
|
destination: Cesium.Cartesian3.fromDegrees(
|
121.23142475566037,
|
30.314431916707203,
|
101204.78027978493
|
),
|
orientation: {
|
heading: 0.149372341578318,
|
pitch: -0.8022154573481174,
|
roll: 0,
|
},
|
});
|
}
|
},
|
change () {
|
this.showdata1=false;
|
},
|
change1 () {
|
this.showdata2=false;
|
},
|
openDia () {
|
bus.$emit("changeColor",true);
|
},
|
choose (value) {
|
let arr=value.split("-");
|
this.form.freqStart=arr[0];
|
this.form.freqEnd=arr[1];
|
},
|
close () {
|
this.showsituation=false;
|
},
|
getdata (data) {
|
this.colorContainer=data;
|
},
|
// 点击获得态势
|
getTaishi () {
|
if(hander) {
|
return;
|
}
|
hander=new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
|
let pickFeature;
|
// 鼠标点击事件
|
hander.setInputAction((event) => {
|
// 拾取对象
|
divPoint3&&divPoint3.deleteObject();
|
let clickPosition=viewer.scene.camera.pickEllipsoid(event.position);
|
// 转经纬度（弧度）坐标
|
let radiansPos=Cesium.Cartographic.fromCartesian(clickPosition);
|
let lon=Cesium.Math.toDegrees(radiansPos.longitude);
|
let lat=Cesium.Math.toDegrees(radiansPos.latitude);
|
let filename=this.nowfile;
|
let obj={
|
lat: lat,
|
lng: lon,
|
analysisAction: "-1",
|
analysisType: "1",
|
filename: filename,
|
};
|
showCQ(obj).then((res) => {
|
let data=res.data;
|
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);
|
},
|
analysis () {
|
this.reset();
|
let that=this;
|
if(that.imageid) {
|
window.Viewer.entities.removeById(that.imageid);
|
that.imageid=null;
|
}
|
let data={
|
colorName: "-100,0000FF;120,FF0000",
|
startTime: "20160601000000",
|
endTime: 20160630000000,
|
freqStart: 87000000,
|
freqEnd: 108000000,
|
freqPoint: 87000000,
|
points:
|
"[[30.5504351,120.5667114],[32.0499889,120.5667114],[32.0499889,122.4453735],[30.5504351,122.4453735]]",
|
radius: 0,
|
analysisAction: "3",
|
analysisType: 1,
|
};
|
data={ ...data,...this.form };
|
data.freqStart=data.freqStart*1000000;
|
data.freqEnd=data.freqEnd*1000000;
|
data.startTime=data.startTime+"000000";
|
data.endTime=data.endTime*1000000;
|
data.analysisType=="频点"? (data.analysisType=1):"";
|
delete data.radio;
|
if(this.showdata1) {
|
data.startTime=20160601000000;
|
this.chooseplase&&this.chooseplase=="上海"
|
? (data.startTime=20160601000000)
|
:(data.startTime=20191008000000);
|
}
|
if(this.showdata2) {
|
data.endTime=20160630000000;
|
this.chooseplase&&this.chooseplase=="上海"
|
? (data.endTime=20160630000000)
|
:(data.endTime=20191016000000);
|
}
|
const loading=that.$loading({
|
lock: true,
|
text: "计算中",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
data.points=data.points.value;
|
freqBandAnalysis(data)
|
.then((res) => {
|
if(res.message==="Success") {
|
let points=res.data.imgBounds;
|
that.nowfile=Base64.encode(res.data.url)
|
var data1={
|
colorSchemes: 1,
|
file: Base64.encode(res.data.url),
|
maxColor: "FF0000",
|
maxValue: 100,
|
minColor: "0000FF",
|
minValue: 0,
|
showBounds: this.form.points.value,
|
};
|
data1={ ...data1,...this.colorContainer };
|
createPic(data1)
|
.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.showDianci=true;
|
// 图片获取成功 开启拾取
|
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();
|
});
|
}
|
})
|
.catch((error) => {
|
loading.close();
|
});
|
},
|
reset () {
|
//重置
|
if(this.imageid) {
|
window.Viewer.entities.removeById(this.imageid);
|
hander&&
|
hander.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
hander=null;
|
divPoint3&&divPoint3.deleteObject();
|
|
this.imageid=null;
|
this.showDianci=false;
|
}
|
},
|
},
|
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: 1150px;
|
background: url(~@/assets/image/test/22.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
position: absolute;
|
left: 3920px;
|
top: 680px;
|
}
|
.top1 {
|
width: 95%;
|
height: 11%;
|
font-size: 40px;
|
font-weight: bold;
|
margin: 0px auto;
|
border-bottom: 2px solid #fff;
|
color: #fff;
|
letter-spacing: 3px;
|
}
|
.icon {
|
position: absolute;
|
left: 50px;
|
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: 90px;
|
}
|
.close {
|
position: absolute;
|
font-size: 60px;
|
font-weight: 400;
|
right: 60px;
|
top: 20px;
|
}
|
.close:hover {
|
color: red;
|
transition: color 1s;
|
cursor: pointer;
|
}
|
.next {
|
width: 89%;
|
height: 79%;
|
margin: 100px auto;
|
}
|
.next >>> .el-select {
|
width: 95% !important;
|
}
|
.next >>> .el-form-item {
|
margin-top: 60px;
|
}
|
.next >>> .el-input {
|
width: 84%;
|
}
|
.next >>> .el-date-editor {
|
width: 515px;
|
}
|
.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: 100px;
|
width: 100%;
|
height: 70px;
|
display: flex;
|
justify-content: center;
|
}
|
.btns > span {
|
display: block;
|
width: 200px;
|
height: 70px;
|
border: 1px solid #000;
|
text-align: center;
|
font-size: 35px;
|
margin: 0 50px;
|
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: 1200px;
|
right: 0px;
|
}
|
</style>
|
