<template>
|
<div>
|
<div style="height: 100%" v-if="radioValue == '1'">
|
<div style="height: 59%" ref="frequencyAnalysis">
|
<div class="title">
|
<el-image :src="diamondSrc" style="" class="imgSty"></el-image>
|
<p>区域覆盖率</p>
|
</div>
|
<frequencyAnalysis
|
:bodyHeight="frequencyAnalysisHeight"
|
:frequencyValue="frequencyValue"
|
:timeValue="timeValue"
|
:switchValue="switchValue"
|
></frequencyAnalysis>
|
</div>
|
|
<div style="height: 39%; overflow: hidden; margin-top: 2%">
|
<div class="title">
|
<el-image :src="diamondSrc" style="" class="imgSty"></el-image>
|
<p>频率运行图</p>
|
</div>
|
<frequencyOperationDiagram
|
:frequencyValue="frequencyValue"
|
:timeValue="timeValue"
|
:switchValue="switchValue"
|
></frequencyOperationDiagram>
|
</div>
|
</div>
|
|
<div
|
style="height: 100%"
|
v-if="radioValue == '0'"
|
v-loading="loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
element-loading-spinner="el-icon-loading"
|
>
|
<div class="leftMonitor">
|
<el-row>
|
<el-col :span="8">
|
<div class="leftMonitorLine">
|
<p>合法电台</p>
|
|
<div class="leftMonitorLineButton" id="legitimateArr">
|
<draggable
|
v-model="legitimateArr"
|
group="site"
|
animation="300"
|
dragClass="dragClass"
|
ghostClass="ghostClass"
|
chosenClass="chosenClass"
|
@start="onStart"
|
@end="onEnd"
|
@onadd="onadd"
|
>
|
<transition-group>
|
<div
|
v-for="item in legitimateArr"
|
:key="item.frequencyValue"
|
>
|
<el-button
|
v-if="item.isActive == '1'"
|
class="selButton"
|
type="primary"
|
size="large"
|
style="width: 100%"
|
@click="selFrequery(item.frequencyValue)"
|
>{{ item.frequencyValue }}</el-button
|
>
|
<el-button
|
v-else
|
class="selButton"
|
type="info"
|
size="large"
|
style="width: 100%"
|
@click="selFrequery(item.frequencyValue)"
|
>{{ item.frequencyValue }}</el-button
|
>
|
</div>
|
</transition-group>
|
</draggable>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="leftMonitorLine">
|
<p>非法频率</p>
|
<div class="leftMonitorLineButton" id="illegalArr">
|
<draggable
|
v-model="illegalArr"
|
group="site"
|
animation="100"
|
dragClass="dragClass"
|
ghostClass="ghostClass"
|
chosenClass="chosenClass"
|
@start="onStart"
|
@end="onEnd"
|
@onadd="onadd"
|
>
|
<transition-group>
|
<div v-for="item in illegalArr" :key="item.frequencyValue">
|
<el-button
|
v-if="item.isActive == '1'"
|
type="primary"
|
size="large"
|
class="selButton"
|
style="width: 100%"
|
@click="selFrequery(item.frequencyValue)"
|
>{{ item.frequencyValue }}</el-button
|
>
|
<el-button
|
v-else
|
type="info"
|
size="large"
|
style="width: 100%"
|
@click="selFrequery(item.frequencyValue)"
|
>{{ item.frequencyValue }}</el-button
|
>
|
</div>
|
</transition-group>
|
</draggable>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="leftMonitorLine">
|
<p>可疑频率</p>
|
<div class="leftMonitorLineButton" id="suspectedArr">
|
<draggable
|
v-model="suspectedArr"
|
group="site"
|
animation="100"
|
dragClass="dragClass"
|
ghostClass="ghostClass"
|
chosenClass="chosenClass"
|
@start="onStart"
|
@end="onEnd"
|
@onadd="onadd"
|
>
|
<transition-group>
|
<div v-for="(item, index) in suspectedArr" :key="index">
|
<el-button
|
v-if="item.isActive == '1'"
|
class="selButton"
|
type="primary"
|
size="large"
|
style="width: 100%"
|
@click="selFrequery(item.frequencyValue)"
|
>{{ item.frequencyValue }}</el-button
|
>
|
<el-button
|
v-else
|
class="selButton"
|
type="info"
|
size="large"
|
style="width: 100%"
|
@click="selFrequery(item.frequencyValue)"
|
>{{ item.frequencyValue }}</el-button
|
>
|
</div>
|
</transition-group>
|
</draggable>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import frequencyAnalysis from "./frequencyAnalysis";
|
import frequencyOperationDiagram from "./frequencyOperationDiagram";
|
import draggable from "vuedraggable";
|
export default {
|
props: ["timeValue", "frequencyValue", "switchValue", "radioValue"],
|
components: { frequencyAnalysis, frequencyOperationDiagram, draggable },
|
data() {
|
return {
|
loading: false,
|
drag: false,
|
diamondSrc: require("@/assets/diamond.png"),
|
frequencyAnalysisHeight: "",
|
legitimateArr: [],
|
illegalArr: [],
|
suspectedArr: [],
|
};
|
},
|
mounted() {
|
if (this.radioValue == "0") {
|
this.getLeftMonitor();
|
} else {
|
let frequencyAnalysisBlockHeight =
|
this.$refs.frequencyAnalysis.offsetHeight;
|
this.frequencyAnalysisHeight = frequencyAnalysisBlockHeight - 30;
|
}
|
},
|
methods: {
|
onStart(e) {
|
this.drag = true;
|
},
|
onEnd(e) {
|
this.drag = false;
|
|
let fromName = e.from.parentNode.parentNode.id;
|
let toName = e.to.parentNode.parentNode.id;
|
|
let type = null;
|
let frequency = null;
|
if (toName === "legitimateArr") {
|
type = 0;
|
frequency = this.legitimateArr[e.newIndex].frequencyValue;
|
} else if (toName === "illegalArr") {
|
type = 1;
|
frequency = this.illegalArr[e.newIndex].frequencyValue;
|
} else {
|
type = "";
|
frequency = this.suspectedArr[e.newIndex].frequencyValue;
|
}
|
|
let param = {
|
bid: "setFreqType",
|
frequency: frequency,
|
type: type,
|
};
|
|
this.$getJSON(
|
window.backstageURL + "dataservice/getNoTokenData",
|
param
|
).then((res) => {});
|
},
|
|
onadd(evt) {
|
var itemEl = evt.item; // dragged HTMLElement
|
evt.to; // target list
|
evt.from; // previous list
|
evt.oldIndex; // tag's old index within old parent
|
evt.newIndex; // tag's new index within new parent
|
evt.clone; // the clone tag
|
evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving
|
},
|
|
getLeftMonitor() {
|
this.loading = true;
|
this.$getJSON(window.backstageURL + "dataservice/getCurrentFreqs").then(
|
(res) => {
|
let tmpData = JSON.parse(JSON.stringify(res.data.data[0]));
|
this.legitimateArr = [];
|
this.illegalArr = [];
|
this.suspectedArr = [];
|
tmpData.forEach((item) => {
|
if (item.isWhiteFreq == 1) {
|
item.name = item.frequencyValue;
|
this.legitimateArr.push(item);
|
} else if (item.isFavoriteFreq == 1) {
|
item.name = item.frequencyValue;
|
this.illegalArr.push(item);
|
} else if (item.isWhiteFreq == 0 && item.isFavoriteFreq == 0) {
|
item.name = item.frequencyValue;
|
this.suspectedArr.push(item);
|
} else {
|
}
|
});
|
this.loading = false;
|
}
|
);
|
},
|
|
selFrequery(fre) {
|
this.$emit("selFre", fre);
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.title {
|
display: flex;
|
flex-wrap: nowrap;
|
flex-direction: row;
|
margin-left: 20px;
|
height: 30px;
|
|
.imgSty {
|
width: 15px;
|
height: 15px;
|
margin-top: 7.5px;
|
}
|
|
p {
|
font-size: 18px;
|
color: #4dd6b6;
|
line-height: 30px;
|
margin-left: 10px;
|
}
|
}
|
|
.leftMonitor {
|
width: 96%;
|
margin-left: 2%;
|
.leftMonitorLine {
|
margin-top: 20px;
|
border: 1px solid #409eff;
|
position: relative;
|
overflow: hidden;
|
height: calc(100vh - 118px);
|
.leftMonitorLineButton {
|
position: absolute;
|
left: 0;
|
top: 52px;
|
right: -17px;
|
bottom: 0;
|
overflow-x: hidden;
|
overflow-y: scroll;
|
height: calc(100vh - 175px);
|
}
|
p {
|
text-align: center;
|
height: 50px;
|
line-height: 50px;
|
font-weight: 800;
|
color: white;
|
font-size: 24px;
|
border-bottom: 2px solid #409eff;
|
}
|
}
|
}
|
|
/deep/ .el-button {
|
border-radius: 0;
|
border-top: none;
|
border-left: none;
|
border-right: none;
|
}
|
|
/deep/ .el-button--primary {
|
background-color: transparent;
|
}
|
.selButton {
|
}
|
</style>
|
