<template>
|
<div class="bottom" v-if="historyShow">
|
<div class="historySelectContainer">
|
<div class="history-item" style="margin: 0 60px" v-if="showimg">
|
<el-button class="fpBtn" @click="play">
|
<img src="@/assets/image/botbtn/fp.png" />
|
</el-button>
|
</div>
|
<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="240px">
|
<el-form-item label="展示模型:" prop="freqType">
|
<el-select v-model="form.freqType" placeholder="请选择活动区域">
|
<el-option label="频域动态展示" value="1"></el-option>
|
<el-option label="时域动态展示" value="2"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="区域:" prop="area">
|
<el-select v-model="form.points" placeholder="请选择活动区域">
|
<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="startTime">
|
<el-date-picker
|
v-model="form.startTime"
|
:picker-options="pickerOptions"
|
default-value="2016-06-01"
|
format="yyyy-MM-dd"
|
placeholder="选择日期"
|
@change="change"
|
type="date"
|
value-format="yyyyMMdd"
|
></el-date-picker>
|
</el-form-item>
|
|
<el-form-item label="无线电业务:" prop="name">
|
<el-select @change="choose" v-model="form.functionID">
|
<el-option
|
v-for="(item1, index) in radio"
|
:key="index"
|
:label="item1.bussName"
|
:value="item1.startFreq + '-' + item1.endFreq"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div class="btns">
|
<span @click="reset">重置</span>
|
<span @click="analysis">分析</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 时间年限滑动条 -->
|
<div class="yearSlider" v-if="showJingdu">
|
<!-- 滑动条 -->
|
<el-slider
|
v-model="iniData"
|
:step="step"
|
:format-tooltip="formateTooltip"
|
:max="max"
|
@input="yearChange"
|
></el-slider>
|
</div>
|
</div>
|
<div class="showpic" v-if="showpic">
|
<div :style="innerbac" @click="openDia"></div>
|
</div>
|
<changePic @colordata="getdata1" class="dia" />
|
</div>
|
</template>
|
<script>
|
import bus from "../../utils/bus";
|
import {
|
intensity,
|
getbounds,
|
createPic,
|
picurl,
|
getVectorList,
|
getRadio,
|
DynamicMap,
|
} from "../../api/http";
|
import changePic from "../common/color.vue";
|
let Base64 = require("js-base64").Base64;
|
window.historyImager = undefined;
|
export default {
|
name: "bottom",
|
components: {
|
changePic,
|
},
|
data() {
|
return {
|
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%`,
|
},
|
form: {
|
freqType: "1",
|
points: "",
|
startTime: new Date("2016-06-01"),
|
startFreq: "",
|
endFreq: "",
|
},
|
showfield: true,
|
iniData: 0,
|
max: 96,
|
step: 1,
|
marks: [],
|
// yhadd
|
showJingdu: false,
|
showimg: false,
|
historyShow: false,
|
imageid: null,
|
timer: null,
|
radio: "",
|
region: "",
|
pickerOptions: {},
|
aaa: "",
|
isclose: false,
|
showpic: false,
|
colorContainer: {},
|
loading: null,
|
once: true,
|
|
readFirst: true,
|
};
|
},
|
methods: {
|
change() {
|
this.readFirst = false;
|
},
|
openDia() {
|
bus.$emit("changeColor", true);
|
},
|
getdata1(data) {
|
this.colorContainer = data;
|
},
|
reset() {
|
this.isclose = true;
|
this.once = true;
|
|
if (this.imageid) {
|
window.Viewer.entities.removeById(this.imageid);
|
this.imageid = null;
|
}
|
if (window.timer) {
|
this.iniData = 0;
|
this.showJingdu = false;
|
this.showimg = false;
|
window.clearInterval(window.timer);
|
window.timer = null;
|
return;
|
}
|
},
|
analysis() {
|
this.reset();
|
let data_db = {
|
startTime: 20160601000000,
|
endTime: null,
|
startFreq: 87000000,
|
endFreq: 108000000,
|
freqType: 1,
|
step: null,
|
points:
|
"[[30.5977297,120.5831909],[31.9801234,120.5831909],[31.9801234,122.7694702],[30.5977297,122.7694702]]",
|
radius: 0,
|
freqPoint: null,
|
};
|
let obj;
|
obj = { ...data_db, ...this.form };
|
obj.startFreq = obj.startFreq + "000000";
|
obj.endFreq = obj.endFreq + "000000";
|
if (this.readFirst) {
|
obj.startTime = 20160601000000;
|
}
|
|
delete obj.functionID;
|
this.loading = this.$loading({
|
lock: true,
|
text: "计算中",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
//获取无线电数据
|
this.getdata(obj);
|
this.showJingdu = true;
|
},
|
getdata(obj) {
|
DynamicMap(obj)
|
.then((res) => {
|
if (res.message === "Success") {
|
this.marks = res.rows;
|
this.max = res.rows.length;
|
this.play();
|
this.showpic = true;
|
}
|
})
|
.catch((error) => {
|
this.loading.close();
|
});
|
},
|
// 当年份变化时
|
close() {
|
this.historyShow = false;
|
},
|
choose(value) {
|
let arr = value.split("-");
|
this.form.startFreq = arr[0];
|
this.form.endFreq = arr[1];
|
},
|
yearChange(index) {
|
let that = this;
|
if (index != 0) {
|
let points = this.marks[index - 1].imgBounds;
|
let data = {
|
colorSchemes: 1,
|
file: Base64.encode(this.marks[index - 1].url),
|
maxColor: "FF0000",
|
maxValue: 100,
|
minColor: "0000FF",
|
minValue: 0,
|
showBounds: that.form.points,
|
};
|
data = { ...data, ...this.colorContainer };
|
createPic(data)
|
.then((res2) => {
|
if (that.isclose) {
|
return;
|
}
|
if (that.imageid) {
|
window.Viewer.entities.removeById(that.imageid);
|
that.imageid = null;
|
}
|
|
let rectangle = sgworld.Creator.createCloudMap(
|
"雷达反射率",
|
{
|
minx: points.xmin,
|
miny: points.ymin,
|
maxx: points.xmax,
|
maxy: points.ymax,
|
},
|
[
|
"http://221.224.53.36:9081/calc/picurl?file=" +
|
Base64.encode(res2.data),
|
],
|
0.2
|
);
|
|
// sgworld.Creator.createCloudMap("雷达反射率", {
|
// 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.imageid = rectangle.item._id;
|
|
that.loading.close();
|
if (that.once) {
|
that.$message({
|
message: "计算成功",
|
type: "success",
|
});
|
}
|
that.once = false;
|
})
|
.catch((error) => {
|
this.loading.close();
|
});
|
}
|
},
|
// 格式化当前的提示信息
|
formateTooltip(value) {
|
if (value && value != 0) {
|
return this.marks[value - 1].memo;
|
}
|
},
|
//播放
|
play() {
|
if (window.timer) {
|
window.clearInterval(window.timer);
|
window.timer = null;
|
return;
|
}
|
//循环执行，每隔1秒钟执行一次 1000
|
this.isclose = false;
|
window.timer = window.setInterval(refreshCount, 5000);
|
let that = this;
|
function refreshCount() {
|
if (that.iniData >= that.max) {
|
that.iniData = 0;
|
return;
|
}
|
that.iniData = that.iniData + 1;
|
}
|
},
|
},
|
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;
|
},
|
},
|
},
|
mounted() {
|
bus.$on("clearEve", (e) => {
|
this.reset();
|
});
|
bus.$on("areaData", (e) => {
|
this.region = e;
|
});
|
bus.$on("radioData", (e) => {
|
this.radio = e;
|
});
|
bus.$on("showdio", (e) => {
|
this.historyShow = e == 1;
|
this.readFirst = TextTrackCue;
|
});
|
let data = {
|
startTime: 20160608000000,
|
endTime: null,
|
startFreq: 87000000,
|
endFreq: 108000000,
|
freqType: 1,
|
step: null,
|
points:
|
"[[30.5977297,120.5831909],[31.9801234,120.5831909],[31.9801234,122.7694702],[30.5977297,122.7694702]]",
|
radius: 0,
|
freqPoint: null,
|
};
|
let that = this;
|
},
|
};
|
</script>
|
<style scoped>
|
/* yhadd */
|
.clearfix:after {
|
content: "";
|
display: table;
|
height: 0;
|
visibility: both;
|
clear: both;
|
}
|
|
.mapChange,
|
.mapHisChange {
|
float: right;
|
border-radius: 5px;
|
margin-right: 10px;
|
overflow: hidden;
|
width: 118px;
|
height: 67%;
|
pointer-events: all;
|
transition: all 0.3s ease;
|
background: rgba(0, 0, 0, 0.5);
|
}
|
/* .mapChange:hover {
|
width: 12.5%;
|
} */
|
.mapItem {
|
position: relative;
|
float: right;
|
margin: 10px 10px;
|
box-sizing: border-box;
|
border: 1px solid transparent;
|
}
|
.mapItem:hover {
|
border: 1px solid #0988ff;
|
border-radius: 4px;
|
transform: scale(1.05);
|
}
|
.mapItemTitle {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
text-align: center;
|
background: rgba(0, 0, 0, 0.5);
|
color: white;
|
width: 100%;
|
}
|
.topRuler,
|
.bottomRuler {
|
margin-top: -16px;
|
display: flex;
|
color: white;
|
}
|
.topRuler {
|
margin-bottom: -16px;
|
width: 100%;
|
margin-left: 6%;
|
}
|
.bottomRuler:last-child {
|
border-right: 1px solid white;
|
}
|
.topRuler:last-child {
|
border-right: 1px solid white;
|
}
|
.topRulerItems,
|
.bottomRulerItems {
|
position: relative;
|
flex: 1;
|
width: 14%;
|
height: 10px;
|
border-left: 1px solid white;
|
}
|
.bottomRulerItems span {
|
position: absolute;
|
top: 15px;
|
left: -25%;
|
}
|
.topRulerItems span {
|
position: absolute;
|
bottom: 15px;
|
left: -20%;
|
}
|
.yearSlider {
|
width: 40%;
|
margin: 0 auto;
|
display: inline-block;
|
}
|
/* yhadd */
|
.bottom {
|
top: 240px;
|
position: absolute;
|
bottom: 0;
|
width: 100%;
|
height: 14%;
|
}
|
.historySelectContainer {
|
text-align: center;
|
pointer-events: all;
|
display: inline-block;
|
width: 100%;
|
height: 100%;
|
/* background-image: url(~@/assets/img/bottom/background.png); */
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
/* background: rgba(0, 0, 0, .5); */
|
}
|
.historySelect {
|
width: 94.25%;
|
}
|
.history-item {
|
display: inline-block;
|
}
|
.history-item .el-button {
|
padding: 0 !important;
|
border: unset;
|
float: unset;
|
display: block;
|
background: rgba(0, 0, 0, 0);
|
}
|
.fpBtn,
|
.closeBtn {
|
position: relative;
|
top: 18px;
|
width: 100%;
|
}
|
/* yhadd */
|
.fpBtn {
|
top: -15px;
|
}
|
/* yhadd */
|
.fpBtn img,
|
.closeBtn img,
|
.changeBtn img {
|
width: 100%;
|
}
|
.closeBtn,
|
.changeBtn {
|
margin-left: 2.8%;
|
}
|
.changeBtn {
|
width: 4.5%;
|
}
|
.changeBtn .el-button {
|
margin: 0 10%;
|
width: 27.2%;
|
display: inline-block !important;
|
position: relative;
|
top: 18px;
|
}
|
.historyTitle {
|
width: 102px;
|
font-size: 17px;
|
font-family: Microsoft YaHei;
|
font-weight: bold;
|
color: #ffffff;
|
line-height: 21px;
|
text-shadow: 0px 2px 5px rgba(3, 3, 3, 0.46);
|
}
|
.mapModeControl {
|
position: absolute;
|
right: 0px;
|
bottom: 39%;
|
width: 5.75%;
|
pointer-events: all;
|
}
|
.mapMode {
|
width: 100%;
|
}
|
.mapMode dl {
|
width: 86%;
|
cursor: pointer;
|
margin: 7%;
|
}
|
|
.mapMode dl {
|
position: relative;
|
}
|
.mapMode dl img {
|
width: 100%;
|
}
|
|
.mapMode dt {
|
width: 100%;
|
height: 20px;
|
line-height: 20px;
|
position: absolute;
|
left: 0;
|
bottom: 0px;
|
font-size: 12px;
|
text-align: center;
|
color: #fff;
|
text-shadow: 1px 1px 2px #000;
|
background: rgba(0, 0, 0, 0.5);
|
}
|
|
.mapModeActive {
|
background: rgba(1, 37, 80, 0.5) !important;
|
}
|
|
.thisYearConatiner {
|
min-width: 102px;
|
height: 29px;
|
background: rgba(0, 0, 0, 0.27);
|
border-radius: 15px;
|
text-align: center;
|
margin: 12px 0;
|
display: inline-block;
|
}
|
.thisYearConatiner p {
|
height: 29px;
|
font-size: 16px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #3da5ec;
|
line-height: 29px;
|
text-shadow: 0px 2px 5px rgba(3, 3, 3, 0.46);
|
}
|
|
.thisYear {
|
display: inline-block;
|
line-height: 28px;
|
margin-right: 5px;
|
}
|
|
.timeSet {
|
width: 100%;
|
height: 10px;
|
background: rgba(255, 255, 255, 0.29);
|
border-radius: 5px;
|
position: relative;
|
top: 24px;
|
display: flex;
|
}
|
.timeSet li {
|
height: 19px;
|
font-size: 19px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #e1f4ff;
|
line-height: 19px;
|
margin: auto;
|
position: relative;
|
top: 15px;
|
}
|
.timeSet li:first-child {
|
margin-left: 0;
|
}
|
.timeSet li:last-child {
|
margin-right: 0;
|
}
|
.selectIcon {
|
width: 17px;
|
height: 17px;
|
background: #ffffff;
|
border: 5px solid #0987ff;
|
box-shadow: 0px 3px 8px 0px rgba(3, 3, 3, 0.25);
|
border-radius: 50%;
|
position: absolute;
|
bottom: 20px;
|
left: -14px;
|
margin-left: 50%;
|
}
|
.dia {
|
transform: translate(3900px, 422px);
|
}
|
.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: 450px;
|
}
|
.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: 60px;
|
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: -550px;
|
}
|
.close {
|
position: absolute;
|
font-size: 60px;
|
right: 60px;
|
top: 25px;
|
font-weight: 400;
|
}
|
.close:hover {
|
color: red;
|
transition: color 1s;
|
cursor: pointer;
|
}
|
.next {
|
width: 89%;
|
height: 79%;
|
margin: 100px auto;
|
}
|
.next >>> .el-form-item {
|
margin-top: 80px;
|
}
|
.next >>> .el-input {
|
width: 560px;
|
}
|
.next >>> .el-date-editor {
|
width: 560px;
|
}
|
.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: 130px;
|
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;
|
margin: 0px 58px;
|
cursor: pointer;
|
}
|
.btns >>> .el-date-table__row {
|
color: #000 !important;
|
}
|
.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: 1600px;
|
right: 100px;
|
z-index: 9;
|
}
|
</style>
|
