<template>
|
<div>
|
<!-- <div class="flytoBtns" v-if="showFly">
|
<span @click="tofly(true)">上海</span>
|
<span @click="tofly(false)">广州</span>
|
</div> -->
|
<div class="top">
|
<div class="far">
|
<span v-for="(item, index) in top2"
|
:key="index + '-top2'"
|
@mousemove="changebac(index)"
|
@mouseout="returnbac(index)"
|
@click="ishow(index)"
|
:style="{ background: `url(${item.img})` }"></span>
|
<span v-for="(item, index) in bot1"
|
:key="index + '-bot1'"
|
@mousemove="changebac1(index)"
|
@click="remove(index)"
|
@mouseout="returnbac1(index)"
|
:style="{ background: `url(${item.img})` }"></span>
|
</div>
|
<div class="far_2">
|
<span @click="benear"></span>
|
<span @click="befar"></span>
|
</div>
|
</div>
|
<div class="bot"
|
v-if="showtool"
|
id="move3">
|
<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"
|
:rules="rules"
|
:model="form"
|
label-width="250px">
|
<el-form-item label="区域"
|
prop="name">
|
<el-select v-model="form.name"
|
placeholder="请选择活动区域">
|
<el-option label="闵行区"
|
value="shanghai"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="起始时间"
|
prop="date1">
|
<el-date-picker v-model="form.date1"
|
:picker-options="pickerOptions"
|
format="yyyy-MM-dd"
|
placeholder="选择日期"
|
type="date"
|
value-format="yyyyMMddHHmmss"></el-date-picker>
|
</el-form-item>
|
<el-form-item label="结束时间"
|
prop="date2">
|
<el-date-picker v-model="form.date2"
|
:picker-options="pickerOptions"
|
format="yyyy-MM-dd"
|
placeholder="选择日期"
|
type="date"
|
value-format="yyyyMMddHHmmss"></el-date-picker>
|
</el-form-item>
|
<el-form-item label="分析类型"
|
prop="type">
|
<el-select v-model="form.type"
|
placeholder="请选择活动区域">
|
<el-option label="频点"
|
value="shanghai"></el-option>
|
<el-option label="频段"
|
value="beijing"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="无线电业务"
|
prop="resource">
|
<el-select v-model="form.resource"
|
placeholder="请选择活动区域">
|
<el-option label="电视(74MHz~87MHz)"
|
value="shanghai"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div class="btns">
|
<span @click="showpic">分析</span>
|
<span @click="clear">重置</span>
|
<!-- <span style=" ">生成报告</span> -->
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import bus from "../../../utils/bus";
|
import axios from "axios";
|
import { oneStep,twoStep } from "../../../api/http";
|
export default {
|
data () {
|
return {
|
top2: [
|
{ img: require("@/assets/image/test/组 166.png") },
|
{ img: require("@/assets/image/test/组 167.png") },
|
{ img: require("@/assets/image/test/组 168.png") },
|
],
|
bot1: [
|
{ img: require("@/assets/image/test/组 163.png") },
|
{ img: require("@/assets/image/test/组 164.png") },
|
{ img: require("@/assets/image/test/组 165.png") },
|
],
|
form: {
|
name: "",
|
date1: "20160615000000",
|
date2: "20160624300000",
|
type: "2",
|
resource: "",
|
},
|
showFly: false,
|
freqPoint: null,
|
freqStart: 87000000,
|
freqEnd: 108000000,
|
rules: {
|
name: [{ required: true,message: "请选择区域",trigger: "change" }],
|
date1: [
|
{
|
type: "date",
|
required: true,
|
message: "请选择开始日期",
|
trigger: "blur",
|
},
|
],
|
date2: [
|
{
|
type: "date",
|
required: true,
|
message: "请选择结束时间",
|
trigger: "blur",
|
},
|
],
|
type: [
|
{
|
type: "array",
|
required: true,
|
message: "请选择一个分析类型",
|
trigger: "blur",
|
},
|
],
|
resource: [
|
{ required: true,message: "请选择无线电业务",trigger: "change" },
|
],
|
},
|
pickerOptions: {},
|
url: "",
|
showtool: false,
|
ishowdata: false,
|
isshowTL: false,
|
scale: 2.13,
|
};
|
},
|
mounted () {
|
bus.$on("openCheak",(e) => {
|
this.showtool=e;
|
});
|
},
|
methods: {
|
remove (index) {
|
|
if(index==0) {
|
var tlobj={
|
value: false,
|
value1: true,
|
value2: false,
|
show: true,
|
};
|
bus.$emit("ishowMilitaryPlot",tlobj);
|
// bus.$emit("clearEve",true);
|
// window.FieldIntensity&&window.FieldIntensity.deleteObject();
|
// window.imageidXT&&window.Viewer.entities.removeById(window.imageidXT);
|
}
|
if(index==1) {
|
window.createTool=true;
|
}
|
},
|
benear () {
|
$(".navigation-control")[0].click();
|
},
|
befar () {
|
$(".navigation-control-last")[0].click();
|
},
|
tofly (data) {
|
if(data) {
|
//上海
|
window.Viewer.camera.flyTo({
|
destination: Cesium.Cartesian3.fromDegrees(
|
121.23142475566037,
|
30.314431916707203,
|
101204.78027978493
|
),
|
orientation: {
|
heading: 0.149372341578318,
|
pitch: -0.8022154573481174,
|
roll: 0,
|
},
|
});
|
} else {
|
let guanzhou={
|
fromdate: new Date("2019-10-08"),
|
todate: new Date("2019-10-16"),
|
};
|
bus.$emit("guanzhou",guanzhou);
|
window.Viewer.camera.flyTo({
|
destination: Cesium.Cartesian3.fromDegrees(
|
113.29503528791071,
|
23.104708355136264,
|
4109.8492337442767
|
),
|
orientation: {
|
heading: 0.8349372341578318,
|
pitch: -0.85222154573481174,
|
roll: 0,
|
},
|
});
|
}
|
},
|
changebac (index) {
|
let movein=[
|
{ img: require("@/assets/image/change/组179.png") },
|
{ img: require("@/assets/image/change/组180.png") },
|
{ img: require("@/assets/image/change/组181.png") },
|
];
|
this.$set(this.top2,index,movein[index]);
|
},
|
returnbac (index) {
|
let data=[
|
{ img: require("@/assets/image/test/组 166.png") },
|
{ img: require("@/assets/image/test/组 167.png") },
|
{ img: require("@/assets/image/test/组 168.png") },
|
];
|
this.$set(this.top2,index,data[index]);
|
},
|
changebac1 (index) {
|
let movein=[
|
{ img: require("@/assets/image/change/组172.png") },
|
{ img: require("@/assets/image/change/组173.png") },
|
{ img: require("@/assets/image/change/组174.png") },
|
];
|
this.$set(this.bot1,index,movein[index]);
|
},
|
returnbac1 (index) {
|
let movein=[
|
{ img: require("@/assets/image/test/组 163.png") },
|
{ img: require("@/assets/image/test/组 164.png") },
|
{ img: require("@/assets/image/test/组 165.png") },
|
];
|
this.$set(this.bot1,index,movein[index]);
|
},
|
close () {
|
this.showtool=false;
|
},
|
clear () {
|
this.form=[];
|
},
|
showpic () {
|
let data={
|
startTime: "20160615000000",
|
endTime: 20160624300000,
|
freqStart: 87000000,
|
freqEnd: 108000000,
|
freqPoint: null,
|
points:
|
"[[31.116443,121.3323212],[31.2471495,121.3323212],[31.2471495,121.5287018],[31.116443,121.5287018]]",
|
analysisType: 2,
|
};
|
oneStep(data).then((res) => {
|
let data={
|
file: "url",
|
maxColor: "FF0000",
|
minColor: "0000FF",
|
minValue: 0,
|
maxValue: 100,
|
showBounds:
|
"[[31.116443,121.3323212],[31.2471495,121.3323212],[31.2471495,121.5287018],[31.116443,121.5287018]]",
|
};
|
twoStep(data).then((res) => {
|
console.log(res);
|
});
|
});
|
},
|
ishow (index) {
|
|
if(index==1) {
|
bus.$emit("ishow",true);
|
}
|
if(index==0) {
|
this.showFly=this.showFly? false:true;
|
}
|
if(index==2) {
|
var tlobj={
|
value: false,
|
value1: true,
|
value2: false,
|
show: true,
|
};
|
bus.$emit("ishowtuli",tlobj);
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
#move3 {
|
cursor: move;
|
}
|
.top {
|
width: 700px;
|
height: 100px;
|
/* transform: translateX(-103px); */
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
margin-top: 60px;
|
}
|
|
.far {
|
display: block;
|
width: 100%;
|
height: 100%;
|
display: flex;
|
/* flex-direction: column; */
|
}
|
.far > span {
|
display: block;
|
width: calc(100% / 6);
|
height: 100%;
|
background-size: 100% 100% !important;
|
background-repeat: no-repeat !important;
|
background-position: center !important;
|
}
|
|
.far_2 {
|
width: calc(700px / 6);
|
height: 200px;
|
/* display: flex; */
|
/* flex-direction: column; */
|
position: absolute;
|
/* background-color: #fff; */
|
left: 705px;
|
}
|
.far_2 > span {
|
display: block;
|
width: 100%;
|
height: 49%;
|
cursor: pointer;
|
background-size: 100% 100% !important;
|
background-repeat: no-repeat !important;
|
background-position: center !important;
|
}
|
.far_2 > span:nth-child(1) {
|
background: url(../../../assets/image/test/+.png);
|
}
|
.far_2 > span:nth-child(1):hover {
|
background: url(../../../assets/image/change/图层2.png);
|
}
|
.far_2 > span:nth-child(2) {
|
background: url(../../../assets/image/test/-.png);
|
}
|
.far_2 > span:nth-child(2):hover {
|
background: url(../../../assets/image/change/图层1.png);
|
}
|
.bot {
|
width: 940px;
|
/* height: 1200px; */
|
position: absolute;
|
transform: translate(-915px, 200px);
|
background: url(~@/assets/image/test/22.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
}
|
.top1 {
|
width: 95%;
|
margin: 0 auto;
|
height: 135px;
|
border-bottom: 2px solid #fff;
|
letter-spacing: 3px;
|
font-size: 47px;
|
font-family: Source Han Sans SC;
|
color: #ffffff;
|
}
|
.icon {
|
position: absolute;
|
left: 61px;
|
width: 60px;
|
height: 60px;
|
top: 48px;
|
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: 120px;
|
|
font-weight: bold;
|
line-height: 110px;
|
}
|
.close {
|
position: absolute;
|
font-size: 45px;
|
right: 50px;
|
top: 39px;
|
}
|
.close:hover {
|
color: red;
|
transition: color 1s;
|
cursor: pointer;
|
}
|
.next {
|
width: 100%;
|
height: 79%;
|
padding: 0px 0 0 50px;
|
}
|
.next >>> .el-date-editor {
|
width: 538px;
|
}
|
.botcon {
|
display: inline-block;
|
margin: 20px;
|
}
|
.btns {
|
margin-top: 50px;
|
width: 100%;
|
height: 70px;
|
transform: translate(-40px, 70px);
|
display: flex;
|
justify-content: center;
|
}
|
.btns > span {
|
display: block;
|
width: 198px;
|
height: 73px;
|
border: 1px solid #000;
|
text-align: center;
|
line-height: 73px;
|
cursor: pointer;
|
font-size: 36px;
|
font-family: Source Han Sans SC;
|
font-weight: 500;
|
margin: 0 20px;
|
}
|
.btns > span:nth-child(3) {
|
color: #fff;
|
font-size: 36px;
|
background: linear-gradient(0deg, #5c9cff, #6ec6f8);
|
box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.26);
|
border-radius: 8px;
|
}
|
.btns > span:nth-child(-n + 2) {
|
background: #ffffff;
|
box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.26);
|
color: #424242;
|
}
|
.flytoBtns {
|
position: absolute;
|
top: 400px;
|
width: 200px;
|
|
right: 100px;
|
|
display: flex;
|
flex-direction: column;
|
flex-wrap: wrap;
|
}
|
.flytoBtns > span {
|
font-size: 45px;
|
color: #fff;
|
font-weight: bold;
|
display: block;
|
width: 200px;
|
height: 80px;
|
line-height: 80px;
|
text-align: center;
|
margin-top: 20px;
|
cursor: pointer;
|
background: url(~@/assets/image/test/bjtp.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
}
|
</style>
|
