<template>
|
<div>
|
<div class="block frequencyBlock">
|
<p style="color: rgba(77, 214, 182, 1)">频率</p>
|
<el-slider
|
v-model="frequencyValue"
|
:min="frequencyMin"
|
:max="frequencyMax"
|
:marks="frequencyMarks"
|
:format-tooltip="frequencyFormatTooltip"
|
:show-tooltip="true"
|
:step="9"
|
ref="slider1"
|
style="width: 100%; margin-left: 20px"
|
:key="key"
|
>
|
</el-slider>
|
<div class="labelShow">123</div>
|
<el-switch
|
v-model="switchValue"
|
active-text="人工"
|
inactive-text="自动"
|
style="width: 180px"
|
active-color="#4DD6B6"
|
>
|
</el-switch>
|
</div>
|
|
<div class="block timeBlock" style="padding-bottom: 25px">
|
<p style="color: rgba(77, 214, 182, 1)">时间</p>
|
|
<el-slider
|
v-model="timeValue"
|
:min="timeMin"
|
:max="timeMax"
|
:marks="marks"
|
:format-tooltip="formatTooltip"
|
:show-tooltip="true"
|
style="width: 100%; margin-left: 20px"
|
ref="slider2"
|
@change="changeTimeWay"
|
>
|
</el-slider>
|
|
<el-tooltip class="item" effect="dark" content="自动播放" placement="top">
|
<i
|
class="el-icon-video-play"
|
style="margin-left: 20px; cursor: pointer"
|
v-if="!playState"
|
@click="startPlay"
|
></i>
|
</el-tooltip>
|
<el-tooltip class="item" effect="dark" content="暂停播放" placement="top">
|
<i
|
class="el-icon-video-pause"
|
style="margin-left: 20px; cursor: pointer"
|
v-if="playState"
|
@click="stopPlay"
|
></i>
|
</el-tooltip>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="切换等高线"
|
placement="top"
|
>
|
<i
|
class="el-icon-refresh"
|
style="margin-left: 20px; cursor: pointer"
|
@click="changeMap"
|
></i>
|
</el-tooltip>
|
<el-tooltip class="item" effect="dark" content="设置色值" placement="top">
|
<i
|
class="el-icon-s-tools"
|
style="margin-left: 20px; cursor: pointer"
|
@click="setColor"
|
></i>
|
</el-tooltip>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
watch: {
|
frequencyValue: {
|
handler(n, o) {
|
if (this.timer2) {
|
clearTimeout(this.timer2);
|
}
|
this.timer2 = setTimeout(() => {
|
this.getInfo();
|
this.$emit("changeFrequency", this.frequencyValue);
|
}, 1000);
|
},
|
deep: true,
|
immediate: true,
|
},
|
timeValue: {
|
handler(n, o) {
|
if (this.timer1) {
|
clearTimeout(this.timer1);
|
}
|
this.timer1 = setTimeout(() => {
|
this.getInfo();
|
if (this.marksData[this.timeValue]) {
|
this.$emit("changeTimeValue", this.marksData[this.timeValue]);
|
} else {
|
this.$emit("changeTimeValue", this.getCurrentTime());
|
}
|
}, 1000);
|
},
|
deep: true,
|
immediate: true,
|
},
|
switchValue: {
|
handler(n, o) {
|
if (this.switchValue) {
|
this.$emit("changeSwitchValue", 1);
|
} else {
|
this.$emit("changeSwitchValue", 0);
|
}
|
this.getInfo();
|
},
|
deep: true,
|
immediate: true,
|
},
|
leftSelFre: {
|
handler(n, o) {
|
this.frequencyValue = Number(
|
JSON.parse(JSON.stringify(this.leftSelFre))
|
);
|
this.key = !this.key;
|
},
|
},
|
},
|
computed: {
|
timeMarks() {
|
let marks = {};
|
for (let i = 0; i <= 24; i++) {
|
marks[i] = {
|
style: {
|
color: "rgba(77, 214, 182, 1)",
|
},
|
label: i + "h",
|
};
|
}
|
return marks;
|
},
|
},
|
props: ["leftSelFre"],
|
data() {
|
return {
|
key: false,
|
timer1: null,
|
timer2: null,
|
switchValue: true,
|
playState: false,
|
timeInterval: null,
|
artificialChecked: false,
|
timeValue: 0,
|
timeMin: 0,
|
timeMax: 24,
|
marks: {},
|
marksData: [],
|
|
frequencyMin: 522,
|
frequencyMax: 1620,
|
frequencyValue: 1557,
|
frequencyMarks: {
|
540: {
|
style: {
|
color: "rgba(77, 214, 182, 1)",
|
},
|
label: "540MHZ",
|
},
|
1600: {
|
style: {
|
color: "rgba(77, 214, 182, 1)",
|
},
|
label: "1600MHZ",
|
},
|
},
|
};
|
},
|
mounted() {
|
|
this.$nextTick(() => {
|
this.$refs.slider1.setPosition(((1557 - 522) / 1098) * 100);
|
this.$refs.slider2.setPosition(0);
|
});
|
this.getInfoInit();
|
this.timeValue = this.timeMax;
|
},
|
methods: {
|
setColor() {
|
this.$emit("showColorBlock");
|
},
|
changeTimeWay() {},
|
getCurrentTime() {
|
//获取当前时间并打印
|
let yy = new Date().getFullYear();
|
let mm = new Date().getMonth() + 1;
|
let dd = new Date().getDate();
|
let hh = new Date().getHours();
|
let mf =
|
new Date().getMinutes() < 10
|
? "0" + new Date().getMinutes()
|
: new Date().getMinutes();
|
let ss =
|
new Date().getSeconds() < 10
|
? "0" + new Date().getSeconds()
|
: new Date().getSeconds();
|
let gettime = yy + "-" + mm + "-" + dd + " " + hh + ":00";
|
return gettime;
|
},
|
changeMap() {
|
this.$emit("changeMap");
|
},
|
frequencyFormatTooltip(val) {
|
return val + "MHz";
|
},
|
formatTooltip(val) {
|
return this.marksData[val];
|
},
|
getInfo() {
|
let param = new URLSearchParams();
|
|
if (this.switchValue) {
|
param.append("bid", "getTimeline");
|
} else {
|
param.append("bid", "getTimeline_auto");
|
}
|
|
param.append("frequencystr", this.frequencyValue);
|
this.$getJSON(window.backstageURL +
|
"dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
if (res.code == "20000") {
|
let sourceData = res.data.data[0];
|
this.marks = {};
|
let marksData = [];
|
this.timeMax = sourceData.length - 1;
|
sourceData.forEach((item, index) => {
|
// console.log(item.wdate.split("T")[0].split(" ")[0])
|
marksData.push(
|
item.wdate.split("T")[0].split(" ")[0] + " " + item.whour + ":00"
|
);
|
});
|
this.marks = {
|
0: {
|
style: {
|
color: "rgba(77, 214, 182, 1)",
|
},
|
label: marksData[0],
|
},
|
[marksData.length - 1]: {
|
style: {
|
color: "rgba(77, 214, 182, 1)",
|
whiteSpace: "nowrap",
|
overflow: "hidden",
|
textOverflow: "ellipsis",
|
},
|
label: marksData[marksData.length - 1],
|
},
|
};
|
this.marksData = marksData;
|
}
|
});
|
},
|
getInfoInit() {
|
let param = new URLSearchParams();
|
|
if (this.switchValue) {
|
param.append("bid", "getTimeline");
|
} else {
|
param.append("bid", "getTimeline_auto");
|
}
|
|
param.append("frequencystr", this.frequencyValue);
|
this.$getJSON(window.backstageURL +
|
"dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
if (res.code == "20000") {
|
let sourceData = res.data.data[0];
|
this.marks = {};
|
let marksData = [];
|
this.timeMax = sourceData.length - 1;
|
this.timeValue = this.timeMax;
|
sourceData.forEach((item, index) => {
|
marksData.push(
|
item.wdate.split("T")[0].split(" ")[0] + " " + item.whour + ":00"
|
);
|
});
|
this.marks = {
|
0: {
|
style: {
|
color: "rgba(77, 214, 182, 1)",
|
},
|
label: marksData[0],
|
},
|
[marksData.length - 1]: {
|
style: {
|
color: "rgba(77, 214, 182, 1)",
|
whiteSpace: "nowrap",
|
overflow: "hidden",
|
textOverflow: "ellipsis",
|
},
|
label: marksData[marksData.length - 1],
|
},
|
};
|
this.marksData = marksData;
|
}
|
});
|
},
|
startPlay() {
|
if (this.timeValue == this.timeMax) {
|
this.timeValue = 0;
|
}
|
this.playState = true;
|
this.startInterval();
|
},
|
stopPlay() {
|
this.playState = false;
|
this.dropInterval();
|
},
|
changeSlider() {
|
let start = new Date(this.dataPick[0]);
|
let end = new Date(this.dataPick[1]);
|
},
|
startInterval() {
|
this.playState = true;
|
|
this.timeInterval = setInterval(() => {
|
if (this.timeValue == this.timeMax) {
|
this.dropInterval();
|
} else {
|
this.timeValue = this.timeValue + 1;
|
}
|
}, 10000);
|
},
|
dropInterval() {
|
clearInterval(this.timeInterval);
|
this.playState = false;
|
this.timeInterval = null;
|
},
|
},
|
|
beforeDestroy() {
|
this.dropInterval();
|
clearTimeout(this.timer1);
|
clearTimeout(this.timer2);
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
|
/deep/ .el-switch__label span {
|
color: #ffffff;
|
}
|
|
/deep/ .is-active span {
|
color: #4dd6b6 !important;
|
}
|
|
/deep/ .el-switch {
|
height: 30px;
|
line-height: 30px;
|
text-align: right !important;
|
display: block;
|
}
|
|
/deep/ .el-range-editor.el-input__inner {
|
background-color: rgba(77, 214, 182, 1);
|
}
|
|
/deep/ .el-date-editor .el-range__icon {
|
color: black;
|
}
|
|
/deep/ .el-range-editor .el-range-input {
|
background-color: rgba(77, 214, 182, 1);
|
color: black;
|
}
|
|
/deep/ .frequencyBlock .el-slider__marks-text {
|
margin-top: -25px !important;
|
}
|
|
/deep/ .timeBlock .el-slider__marks-text {
|
}
|
|
/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
|
color: rgba(77, 214, 182, 1) !important;
|
}
|
|
/deep/ .el-checkbox__inner {
|
background-color: rgba(77, 214, 182, 0.6) !important;
|
border-color: rgba(77, 214, 182, 1) !important;
|
}
|
|
/deep/ .el-slider__bar {
|
background-color: rgba(77, 214, 182, 1) !important;
|
}
|
|
/deep/ .el-slider__stop {
|
background-color: transparent !important;
|
}
|
|
.block {
|
width: 96%;
|
margin-left: 2%;
|
display: flex;
|
justify-content: space-between;
|
z-index: 109;
|
padding-top: 25px;
|
|
i {
|
white-space: nowrap;
|
line-height: 38px;
|
font-size: 14px;
|
color: rgba(77, 214, 182, 1);
|
}
|
|
p {
|
white-space: nowrap;
|
line-height: 38px;
|
font-size: 14px;
|
}
|
}
|
|
.labelShow {
|
position: absolute;
|
border-radius: 4px;
|
padding: 10px;
|
z-index: 2000;
|
font-size: 12px;
|
line-height: 1.2;
|
min-width: 10px;
|
word-wrap: break-word;
|
}
|
</style>
|
