<template>
|
<div
|
v-loading="loading"
|
element-loading-background="rgba(0,0,0,0.7)"
|
element-loading-text="计算中..."
|
>
|
<div class="dashboard-container">
|
<reportDlg
|
:explain="formReport.explain"
|
:report-title="formReport.reportTitle"
|
:template-visible="templateVisible"
|
@cancel="cancel"
|
@submit="saveReport"
|
></reportDlg>
|
<el-row>
|
<div class="main-wrapper">
|
<div class="module-title">频率/频段态势分析</div>
|
<div ref="mapWrapper">
|
<mapContainer
|
ref="map"
|
:boundList="[]"
|
:imageBounds="imageBounds"
|
:interStationList="[]"
|
:load="load"
|
:mutipleSelect="true"
|
:ngzFile="ngzFile"
|
:show-control="!isClip"
|
:show-polygon="!isClip"
|
:showBounds="showBounds"
|
:showProtectLegend="true"
|
:type="type"
|
s
|
@shapePoints="shapePoints"
|
></mapContainer>
|
</div>
|
</div>
|
<div class="side-wrapper">
|
<!-- <el-row>-->
|
<!-- <RightPanel>-->
|
<div class="module-title">参数选择</div>
|
<el-form
|
class="right-form"
|
label-position="left"
|
label-width="120px"
|
ref="params"
|
:model="formData"
|
:rules="rules"
|
>
|
<el-form-item label="区域:" prop="vector">
|
<el-select
|
v-model="formData.vector"
|
class="selectInput"
|
@change="changeVector"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="(item, index) in vectorList"
|
:key="item.guid"
|
:label="item.vname"
|
:value="index"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="起始时间:" prop="starttime">
|
<el-date-picker
|
v-model="formData.starttime"
|
:picker-options="pickerOptions"
|
format="yyyy-MM-dd"
|
placeholder="选择日期"
|
type="date"
|
value-format="yyyyMMddHHmmss"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="结束时间:" prop="endtime">
|
<el-date-picker
|
v-model="formData.endtime"
|
:picker-options="pickerOptions"
|
format="yyyy-MM-dd"
|
placeholder="选择日期"
|
type="date"
|
value-format="yyyyMMddHHmmss"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="分析类型:" prop="analysisType">
|
<el-select
|
v-model="formData.analysisType"
|
class="selectInput"
|
@change="changeAnalysis"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in analysisTypes"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="无线电业务:" prop="freqBand">
|
<el-select
|
v-model="formData.freqBand"
|
class="selectInput"
|
@change="changeBuss"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in freqBands"
|
:key="item.bussId"
|
:label="
|
item.bussName +
|
'(' +
|
item.startFreq +
|
'MHz~' +
|
item.endFreq +
|
'MHz)'
|
"
|
:value="item.bussId"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
v-if="formData.analysisType == 1 && formData.freqBand != ''"
|
:span="24"
|
label="分析频率:"
|
prop="freqPoint"
|
>
|
<el-select
|
v-model="formData.freqPoint"
|
filterable
|
@change="changeFreq"
|
>
|
<el-option
|
v-for="item in freqPoints"
|
:key="item"
|
:label="item + 'MHz'"
|
:value="item"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
v-show="false"
|
:span="24"
|
class="el-input-group"
|
label="频率范围:"
|
>
|
<el-col :span="11">
|
<el-input v-model="freqStart" class="freqInp freqInput" readonly
|
><span slot="suffix">MHz</span></el-input
|
>
|
</el-col>
|
<el-col :span="2">—</el-col>
|
<el-col :span="11">
|
<el-input v-model="freqEnd" class="freqInp freqInput" readonly
|
><span slot="suffix">MHz</span></el-input
|
>
|
</el-col>
|
</el-form-item>
|
<el-col :span="24" class="buttonArea">
|
<el-button @click="reset">重 置</el-button>
|
<el-button @click="calFun">分 析</el-button>
|
<!-- <el-button type="primary" @click="createReport()">生成报告</el-button> -->
|
</el-col>
|
<!-- <el-col>-->
|
<!-- <img :src="imgUrl" width="200px" />-->
|
<!-- </el-col>-->
|
<el-table
|
v-if="statisticData && statisticData.length > 0"
|
:data="statisticData"
|
v-show="false"
|
:highlight-current-row="true"
|
:max-height="650"
|
>
|
<el-table-column align="center" label="区间" prop="name">
|
<template slot-scope="scope">
|
<el-tag
|
:type="
|
scope.row.name == 'weak'
|
? 'success'
|
: scope.row.name == 'strong'
|
? 'warning'
|
: 'primary'
|
"
|
disable-transitions
|
>
|
{{
|
scope.row.name == "weak"
|
? "弱辐射"
|
: scope.row.name == "strong"
|
? "强辐射"
|
: "其他"
|
}}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column align="center" label="值" prop="value" />
|
</el-table>
|
</el-form>
|
<!-- </RightPanel>-->
|
<!-- </el-row>-->
|
</div>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
import mapContainer from "@/views/components/map";
|
import RightPanel from "@/layout/RightPanel";
|
|
import { freqBands } from "@/api/gis";
|
import {
|
freqBandAnalysis,
|
getTimeListWithSpectrumData,
|
getVectorList,
|
} from "@/api/situation";
|
import { getFunctionInfo, saveSpectrumReport } from "@/api/reportManage";
|
import html2canvas from "html2canvas";
|
import reportDlg from "@/views/coverAnalysis/components/reportDlg";
|
|
export default {
|
components: {
|
mapContainer,
|
reportDlg,
|
RightPanel,
|
},
|
name: "occupy",
|
data() {
|
const time = (rules, value, callback) => {
|
if (this.formData.starttime <= this.formData.endtime) {
|
callback();
|
}
|
return callback(new Error("开始时间应小于结束时间!"));
|
};
|
return {
|
rules: {
|
vector: [{ required: true, message: "请选择区域", trigger: "change" }],
|
starttime: [
|
{ required: true, message: "请选择开始时间!", trigger: "change" },
|
{ validator: time, trigger: "blur" },
|
],
|
endtime: [
|
{ required: true, message: "请选择结束时间!", trigger: "change" },
|
{ validator: time, trigger: "blur" },
|
],
|
analysisType: [
|
{ required: true, message: "请选择分析类型!", trigger: "change" },
|
],
|
freqBand: [
|
{ required: true, message: "请选无线电业务!", trigger: "change" },
|
],
|
freqPoint: [
|
{ required: true, message: "请选分析频率!", trigger: "change" },
|
],
|
},
|
pickerOptions: {
|
// disabledDate(time) {
|
// let _now = Date.now();
|
// return time.getTime() > _now;
|
// }
|
},
|
isClip: false,
|
showImg: false,
|
imgUrl: "",
|
analysisType: 1,
|
analysisTypes: [
|
{ id: 1, name: "频点" },
|
{ id: 2, name: "频段" },
|
],
|
freqPoints: [],
|
freqPoint: "",
|
formData: {
|
vector: "",
|
starttime: "20180901000000",
|
endtime: "20210926000000",
|
analysisType: 1,
|
freqBand: "",
|
freqPoint: "",
|
},
|
starttime: "20180901000000",
|
endtime: "20210926000000",
|
freqStart: "",
|
freqEnd: "",
|
unit: "",
|
units: [],
|
freqBand: "",
|
freqBands: [],
|
showBounds: null,
|
imageBounds: [],
|
ngzFile: "",
|
type: "",
|
loading: false,
|
minValue: "",
|
maxValue: "",
|
buss: "",
|
shapePointsData: "",
|
vector: "",
|
vectorList: [],
|
colorName: "-100,0000FF;120,FF0000",
|
templateVisible: false,
|
formReport: {
|
reportTitle: "",
|
resource: "频率/频段态势分析",
|
createTime: new Date().format("yyyy-MM-dd hh:mm:ss"),
|
type: "word",
|
explain: "",
|
},
|
statisticData: [],
|
resultMap: {},
|
availableTimeList: [],
|
monitorList: [],
|
};
|
},
|
computed: {
|
...mapGetters(["name"]),
|
},
|
created() {
|
this.getFreqBands();
|
this.getVector();
|
// this.getfunctionInfo();
|
this.getAvailableTimeList();
|
},
|
methods: {
|
getAvailableTimeList() {
|
getTimeListWithSpectrumData().then((res) => {
|
let availableTime = res.rows;
|
this.pickerOptions = Object.assign({}, this.pickerOptions, {
|
cellClassName: (_time) => {
|
if (availableTime && availableTime.length > 0) {
|
let time = new Date(_time).Format("yyyyMMddhhmmss") * 1;
|
for (let i = 0; i < availableTime.length; i++) {
|
let item = availableTime[i];
|
if (time >= item.starttime && time <= item.endtime) {
|
return "avail";
|
}
|
}
|
}
|
return "notAvail";
|
},
|
// 禁用以后选择时间不是很方便
|
// disabledDate: (_time) => {
|
// if (availableTime && availableTime.length > 0) {
|
// let time = new Date(_time).Format("yyyyMMddhhmmss") * 1
|
// for (let i = 0; i < availableTime.length; i++) {
|
// let item = availableTime[i];
|
// if (time >= item.starttime && time <= item.endtime) {
|
// return false
|
// }
|
// }
|
// }
|
// return true;
|
// },
|
});
|
});
|
},
|
getfunctionInfo() {
|
let param = {
|
type: 1,
|
};
|
getFunctionInfo(param).then((res) => {
|
this.formReport.resource = res.data.functionname;
|
this.formReport.explain = res.data.info;
|
});
|
},
|
createReport() {
|
this.formReport.createTime = new Date().format("yyyy-MM-dd hh:mm:ss");
|
this.templateVisible = true;
|
},
|
saveReport(item) {
|
let that = this;
|
that.formReport = Object.assign(this.formReport, item);
|
that.formReport.starttime = parseFloat(that.formData.starttime);
|
that.formReport.endtime = parseFloat(that.formData.endtime);
|
if (that.vectorList[that.formData.vector]) {
|
that.formReport.vector = that.vectorList[that.formData.vector].vname;
|
} else {
|
that.formReport.vector = "";
|
}
|
that.formReport.area = that.shapePointsData.area;
|
that.formReport.bussBand = that.buss.bussName;
|
that.formReport.analysisType = that.formData.analysisType;
|
that.formReport.freqStart = parseFloat(that.freqStart);
|
that.formReport.freqEnd = parseFloat(that.freqEnd);
|
that.formReport.freqPoint = parseFloat(that.formData.freqPoint);
|
that.formReport.resultMap = {};
|
that.statisticData.forEach((item) => {
|
that.formReport.resultMap[item.name] = item.value;
|
});
|
that.formReport.reportTitleType = 1;
|
|
this.isClip = true;
|
setTimeout(() => {
|
this.loading = true;
|
|
html2canvas(this.$refs.mapWrapper, {
|
useCORS: true,
|
allowTaint: true,
|
})
|
.then((canvas) => {
|
this.isClip = false;
|
console.log(canvas, "canvas");
|
let dataURL = canvas.toDataURL("image/png");
|
this.showImg = true;
|
this.imgUrl = dataURL;
|
that.formReport.imageSource = dataURL;
|
saveSpectrumReport(JSON.stringify(this.formReport)).then((res) => {
|
console.log(res);
|
this.templateVisible = false;
|
if (res.data) {
|
window.location.href =
|
process.env.VUE_APP_BASE_API +
|
"/show/file/downLoad?file=" +
|
encodeURI(res.data) +
|
"&fileName=频点频段态势分析";
|
} else {
|
this.$message.error("请先分析");
|
}
|
});
|
})
|
.catch((error) => {
|
loading.close();
|
})
|
.finally(() => {
|
this.loading = false;
|
});
|
}, 100);
|
},
|
cancel() {
|
this.templateVisible = false;
|
},
|
load(val) {
|
this.loading = val;
|
},
|
changeVector() {
|
let shap = {
|
latlngs: [],
|
points: [],
|
};
|
shap.type = this.vectorList[this.formData.vector].vtype;
|
JSON.parse(this.vectorList[this.formData.vector].vlatlngs).forEach(
|
(x) => {
|
shap.latlngs.push({
|
lon: x[0],
|
lat: x[1],
|
});
|
shap.points.push([x[1], x[0]]);
|
}
|
);
|
|
this.$refs.map.setPoint(shap);
|
},
|
getVector() {
|
getVectorList().then((res) => {
|
this.vectorList = res.rows;
|
});
|
},
|
changeAnalysis(val) {
|
if (this.formData.freqBand.length > 0) {
|
let freqPoints = [];
|
let freqStart = this.freqStart;
|
let freqEnd = this.freqEnd;
|
let freqStep = this.freqStep;
|
let freqPoint = freqStart;
|
do {
|
freqPoints.push(freqPoint);
|
freqPoint = Number((freqPoint + freqStep / 1000).toFixed(4));
|
} while (freqPoint <= freqEnd);
|
this.freqPoints = freqPoints;
|
}
|
},
|
shapePoints(data) {
|
this.shapePointsData = data;
|
if (JSON.stringify(data) === "{}") {
|
this.formData.vector = "";
|
this.formData.starttime = "";
|
this.formData.endtime = "";
|
this.freqStart = "";
|
this.freqEnd = "";
|
this.formData.freqBand = "";
|
this.ngzFile = "";
|
this.imageBounds = "";
|
this.type = "";
|
this.formData.analysisType = "";
|
this.formData.vector = "";
|
}
|
if (data.no) {
|
this.formData.vector = "自定义";
|
}
|
},
|
getFreqBands() {
|
freqBands().then((res) => {
|
this.freqBands = res.rows;
|
});
|
},
|
changeBuss(val) {
|
let freqBands = this.freqBands;
|
freqBands.forEach((x) => {
|
if (x.bussId == val) {
|
this.buss = x;
|
this.freqStart = x.startFreq;
|
this.freqEnd = x.endFreq;
|
this.freqStep = x.freqStep;
|
if (this.formData.analysisType == 1) {
|
let freqPoints = [];
|
let freqStart = this.freqStart;
|
let freqEnd = this.freqEnd;
|
let freqStep = this.freqStep;
|
let freqPoint = freqStart;
|
do {
|
freqPoints.push(freqPoint);
|
freqPoint = Number((freqPoint + freqStep / 1000).toFixed(4));
|
} while (freqPoint <= freqEnd);
|
this.freqPoints = freqPoints;
|
}
|
this.formData.freqPoint = "";
|
|
this.$refs.map.filterStationByFreq(this.freqStart, this.freqEnd);
|
}
|
});
|
},
|
changeFreq() {
|
this.$refs.map.filterStationByFreq(
|
this.formData.freqPoint,
|
this.formData.freqPoint
|
);
|
},
|
reset() {
|
this.formData.starttime = "";
|
this.formData.endtime = "";
|
this.freqStart = "";
|
this.freqEnd = "";
|
this.formData.freqBand = "";
|
this.ngzFile = "";
|
this.imageBounds = "";
|
this.type = "";
|
this.formData.analysisType = "";
|
this.formData.vector = "";
|
this.$refs.map.clearAll();
|
},
|
calFun() {
|
console.log(this.formData.starttime);
|
let that = this;
|
this.$refs.params.validate((valid) => {
|
if (valid) {
|
that.ngzFile = "";
|
that.imageBounds = [];
|
this.loading = true;
|
let intensity = {};
|
intensity.colorName = this.colorName;
|
intensity.startTime = this.formData.starttime;
|
intensity.endTime = parseFloat(this.formData.endtime) + 300000;
|
intensity.freqStart = parseFloat(this.freqStart) * 1000000;
|
intensity.freqEnd = parseFloat(this.freqEnd) * 1000000;
|
intensity.freqPoint = parseFloat(this.formData.freqPoint) * 1000000;
|
|
intensity.points = JSON.stringify(that.shapePointsData.points);
|
intensity.radius = parseFloat(that.shapePointsData.dRadius);
|
intensity.analysisAction = "3";
|
intensity.analysisType = this.formData.analysisType;
|
this.showBounds = intensity.points;
|
freqBandAnalysis(JSON.stringify(intensity))
|
.then((res) => {
|
if (res.code != 0) {
|
this.$message.error(res.message);
|
this.ngzFile = "";
|
this.imageBounds = "";
|
} else {
|
let monitorIds = res.data.monitorIds;
|
if (monitorIds && monitorIds.length > 0) {
|
this.$refs.map.selectMonitor(monitorIds);
|
}
|
this.resultMap = res.data.map;
|
this.type = "1";
|
this.$message.success("查询成功");
|
let imageBounds = [
|
[res.data.imgBounds.ymin, res.data.imgBounds.xmin],
|
[res.data.imgBounds.ymax, res.data.imgBounds.xmax],
|
];
|
this.imageBounds = imageBounds;
|
this.ngzFile = res.data.url;
|
|
this.statisticData = res.data.statistic;
|
}
|
})
|
.catch((error) => {
|
loading.close();
|
})
|
.finally(() => {
|
this.loading = false;
|
});
|
}
|
});
|
},
|
},
|
};
|
</script>
|
