949 lines
38 KiB
Vue
949 lines
38 KiB
Vue
<template>
|
||
<div >
|
||
<div >
|
||
<div class="top">
|
||
<div class="section">
|
||
<el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="140px">
|
||
<div class="warning">
|
||
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>自动保存可以使系统在异常关闭后自动恢复。在这种情况下，缓存数据将会丢失，但所有存储数据将被保存。
|
||
</div>
|
||
<el-form-item label="自动保存：" >
|
||
<el-switch v-model="formInline.user"></el-switch>
|
||
</el-form-item>
|
||
<el-form-item label="时间间隔：">
|
||
<el-select v-model="formInline.region" placeholder="时间间隔">
|
||
<el-option label="20s" value="shanghai"></el-option>
|
||
<el-option label="30s" value="beijing"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-form ref="form" :model="sizeForm" label-width="140px">
|
||
<div class="warning">
|
||
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>重置分析将删除所有累计的轨迹数据
|
||
</div>
|
||
<!-- <el-form-item > -->
|
||
<el-button type="primary" @click="handleagain()" size="small" style="width:150px">重置</el-button>
|
||
<div class="warning">
|
||
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>在 WGS84 坐标系中输入相机位置
|
||
</div>
|
||
<el-form-item label="相机位置：">
|
||
<el-input v-model="sizeForm.name" style="width:150px" placeholder="经度"></el-input>
|
||
<el-input v-model="sizeForm.name" style="width:150px;margin-left:20px" placeholder="纬度"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dataBoard">
|
||
<div class="section">
|
||
<p class="board-title">坐标转换</p>
|
||
<div class="warning">
|
||
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>通过将图像坐标系转换为物理坐标系，地理参考使您能够将像素测量转换为真实速度和距离。
|
||
</div>
|
||
<el-form ref="form" :model="coordinateForm" label-width="140px">
|
||
<el-form-item label="坐标转换开关：">
|
||
<el-switch v-model="coordinateForm.coordinateClose"></el-switch>
|
||
</el-form-item>
|
||
<el-form-item label="模型：" v-if="coordinateForm.coordinateClose==true">
|
||
|
||
<el-radio-group v-model="coordinateForm.model">
|
||
<el-radio label="Georeferencing"></el-radio>
|
||
|
||
<el-radio label="其他"></el-radio>
|
||
</el-radio-group>
|
||
<div class="warning">
|
||
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>地理参照允许测量物理速度和静态图像源的距离。
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="坐标转换：" v-if="coordinateForm.coordinateClose==true">
|
||
<el-radio-group v-model="coordinateForm.coordinateTransformation">
|
||
<el-radio label="84坐标系"></el-radio>
|
||
<el-radio label="其他"></el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<div style="width:100%;height:300px" v-if="coordinateForm.coordinateClose==true" >
|
||
<iframe id="mapModuleTop" @load="load" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height: calc(100% - 50px)" ></iframe>
|
||
<!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none"
|
||
ref="iframe"></iframe> -->
|
||
</div>
|
||
<el-table border :data="coordinateTableData" v-if="coordinateForm.coordinateClose==true">
|
||
<el-table-column prop="name" label="点名称" align="center" >
|
||
<template slot-scope="scope">
|
||
<el-input
|
||
v-if="scope.$index === 0"
|
||
v-model="scope.row.name"
|
||
maxlength="30"
|
||
placeholder="Required"
|
||
/>
|
||
<span v-else v-text="scope.row.name"></span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="longitude" label="经度" align="center">
|
||
<template slot-scope="scope">
|
||
<el-input
|
||
v-if="scope.row.isEdit"
|
||
v-model="scope.row.longitude"
|
||
maxlength="20"
|
||
placeholder="Required"
|
||
/>
|
||
<span v-else v-text="scope.row.longitude"></span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="latitude" label="纬度" align="center">
|
||
<template slot-scope="scope">
|
||
<el-input
|
||
v-if="scope.row.isEdit"
|
||
v-model="scope.row.latitude"
|
||
maxlength="20"
|
||
placeholder="Required"
|
||
/>
|
||
<span v-else v-text="scope.row.latitude"></span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
v-if="scope.$index === 0"
|
||
size="mini"
|
||
type="text"
|
||
style="color: #2090c1"
|
||
@click="handleAdd(scope.row)"
|
||
>Add
|
||
</el-button>
|
||
<el-button
|
||
v-if="scope.$index !== 0"
|
||
size="mini"
|
||
type="text"
|
||
style="color: #2090c1"
|
||
@click="handleUpdate(scope.row)"
|
||
>{{ scope.row.isEdit ? 'Apply' : 'Edit' }}
|
||
</el-button>
|
||
<el-button
|
||
v-if="scope.$index !== 0"
|
||
size="mini"
|
||
type="text"
|
||
style="color: #F56C6C"
|
||
@click="handleDelete(scope.row)"
|
||
>{{ scope.row.isEdit ? 'Cancel' : 'Delete' }}
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div style="margin-top:15px">
|
||
<el-button type="primary" @click="handleagain()" size="small" style="width:150px" v-if="coordinateForm.coordinateClose==true">保存</el-button>
|
||
</div>
|
||
|
||
</el-form>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="dataBoard">
|
||
<div class="section">
|
||
<p class="board-title">车道识别配置</p>
|
||
<div class="warning">
|
||
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>在视频/动图上设置进口出口道
|
||
</div>
|
||
<el-form ref="form" :model="laneform" label-width="350px">
|
||
<!-- <p>车道识别配置</p> -->
|
||
<el-form-item label="车道识别配置开关：" label-width="150px">
|
||
<el-switch v-model="laneform.laneClose"></el-switch>
|
||
</el-form-item>
|
||
<div style="width:100%;height:300px" v-if="laneform.laneClose==true">
|
||
<iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height: calc(100% - 50px)"></iframe>
|
||
</div>
|
||
<el-form-item label="各车道中心线（区域检测器）：" style="width:300px" v-if="laneform.laneClose==true">
|
||
<el-switch v-model="laneform.areaDetector"></el-switch>
|
||
</el-form-item>
|
||
<el-form-item label="自动识别各车道中心点坐标（断面检测器）：" style="width:300px" v-if="laneform.laneClose==true">
|
||
<el-switch v-model="laneform.sectionDetector"></el-switch>
|
||
</el-form-item>
|
||
<el-button type="primary" @click="handleagain()" size="small" style="width:150px" v-if="laneform.laneClose==true">保存</el-button>
|
||
|
||
|
||
</el-form>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="dataBoard">
|
||
<div class="section">
|
||
<p class="board-title">识别区域</p>
|
||
<div class="warning">
|
||
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>您可以自定义进行视频分析的区域，区域之外的部分将被忽略。此功能可以帮助您检测和跟踪高分辨率视频特定部分的较小对象，实现检测器的数字变焦功能。
|
||
</div>
|
||
<el-form ref="form" :model="identificationAreaform" label-width="140px">
|
||
<!-- <p>车道识别配置</p> -->
|
||
|
||
<el-form-item label="识别区域开关" style="width:250px">
|
||
<el-switch v-model="identificationAreaform.identificationAreaClose"></el-switch>
|
||
</el-form-item>
|
||
<div style="width:100%;height:300px" v-if="identificationAreaform.identificationAreaClose==true">
|
||
<iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height: calc(100% - 50px)"></iframe>
|
||
</div>
|
||
<el-button type="primary" @click="handleagain()" size="small" style="width:150px" v-if="identificationAreaform.identificationAreaClose==true">保存</el-button>
|
||
|
||
</el-form>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="dataBoard">
|
||
<div class="section">
|
||
<p class="board-title">轨迹平滑</p>
|
||
<div class="warning">
|
||
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>为轨迹预测滤波算法定义细化轨迹的时间窗口。数值越小，延迟越小，适用于实时性要求高的场景；数值越大，轨迹的连续性越好，目标即使越过一些障碍也不容易丢失。
|
||
</div>
|
||
<el-form ref="form" :model="trajectorySmoothingform" label-width="140px">
|
||
<el-form-item label="轨迹平滑开关" style="width:250px">
|
||
<el-switch v-model="trajectorySmoothingform.trajectorySmoothingClose"></el-switch>
|
||
</el-form-item>
|
||
<el-form-item label="预测滤波时间" style="width:250px" v-if="trajectorySmoothingform.trajectorySmoothingClose==true">
|
||
<el-input-number v-model="trajectorySmoothingform.time" @change="handleChange" :min="2000" :max="3000" label="预测滤波时间"></el-input-number>
|
||
</el-form-item>
|
||
<el-button type="primary" @click="handleagain()" size="small" style="width:150px" v-if="trajectorySmoothingform.trajectorySmoothingClose==true">保存</el-button>
|
||
</el-form>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="dataBoard">
|
||
<div class="section">
|
||
<p class="board-title">车牌识别</p>
|
||
<div class="warning">
|
||
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>车牌识别开关。牌照信息表示与目标属性。（断面号牌，与断面设置关联）
|
||
</div>
|
||
<el-form ref="form" :model="licensePlateform" label-width="140px">
|
||
<el-form-item label="车牌识别开关" style="width:250px">
|
||
<el-switch v-model="licensePlateform.licensePlateClose"></el-switch>
|
||
</el-form-item>
|
||
<div style="width:100%;height:300px" v-if="licensePlateform.licensePlateClose==true">
|
||
<iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height: calc(100% - 50px)"></iframe>
|
||
</div>
|
||
<el-table border :data="licensePlateTableData" v-if="licensePlateform.licensePlateClose==true">
|
||
<el-table-column prop="sectionPlate" label="断面号牌" align="center">
|
||
<template slot-scope="scope">
|
||
<el-input
|
||
v-if="scope.$index === 0"
|
||
v-model="scope.row.sectionPlate"
|
||
maxlength="30"
|
||
placeholder="Required"
|
||
/>
|
||
<span v-else v-text="scope.row.sectionPlate"></span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="setAssociation" label="断面设置关联" align="center">
|
||
<template slot-scope="scope">
|
||
<el-input
|
||
v-if="scope.row.isEdit"
|
||
v-model="scope.row.setAssociation"
|
||
maxlength="20"
|
||
placeholder="Required"
|
||
/>
|
||
<span v-else v-text="scope.row.setAssociation"></span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="thresholdValue" label="车牌匹配阈值" align="center">
|
||
<template slot-scope="scope">
|
||
<el-input
|
||
v-if="scope.row.isEdit"
|
||
v-model="scope.row.thresholdValue"
|
||
maxlength="20"
|
||
placeholder="Required"
|
||
/>
|
||
<span v-else v-text="scope.row.thresholdValue"></span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
v-if="scope.$index === 0"
|
||
size="mini"
|
||
type="text"
|
||
style="color: #2090c1"
|
||
@click="handleAdd(scope.row)"
|
||
>Add
|
||
</el-button>
|
||
<el-button
|
||
v-if="scope.$index !== 0"
|
||
size="mini"
|
||
type="text"
|
||
style="color: #2090c1"
|
||
@click="handleUpdate(scope.row)"
|
||
>{{ scope.row.isEdit ? 'Apply' : 'Edit' }}
|
||
</el-button>
|
||
<el-button
|
||
v-if="scope.$index !== 0"
|
||
size="mini"
|
||
type="text"
|
||
style="color: #F56C6C"
|
||
@click="handleDelete(scope.row)"
|
||
>{{ scope.row.isEdit ? 'Cancel' : 'Delete' }}
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div style="margin-top:15px">
|
||
<el-button type="primary" @click="handleagain()" size="small" style="width:150px" v-if="licensePlateform.licensePlateClose==true">保存</el-button>
|
||
</div>
|
||
|
||
|
||
</el-form>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="dataBoard">
|
||
<div class="section">
|
||
<p class="board-title">停车状态</p>
|
||
<div class="warning">
|
||
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>位移、速度、加速度的阈值，例如位移＜δ，速度＜v，加速度＜a，
|
||
则判断车辆停车
|
||
</div>
|
||
<el-form :inline="true" :model="stopStateform" class="demo-form-inline" label-width="140px">
|
||
<el-form-item label="位移：" >
|
||
<el-input-number v-model="stopStateform.displacement" @change="handleChange" :min="2000" :max="3000" label="位移"></el-input-number>
|
||
</el-form-item>
|
||
<el-form-item label="速度：" >
|
||
<el-input-number v-model="stopStateform.speed" @change="handleChange" :min="2000" :max="3000" label="速度"></el-input-number>
|
||
</el-form-item>
|
||
<el-form-item label="加速度：">
|
||
<el-input-number v-model="stopStateform.acceleration" @change="handleChange" :min="2000" :max="3000" label="加速度"></el-input-number>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
<div style="margin-top:15px">
|
||
<el-button type="primary" @click="handleagain()" size="small" style="width:150px">保存</el-button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<div class="dataBoard">
|
||
<div class="section">
|
||
<p class="board-title">通信设置</p>
|
||
<el-form :model="communicationform" class="demo-form-inline" label-width="200px">
|
||
<el-form-item label="更新频率：" style="margin-bottom: 20px;">
|
||
<el-input v-model="communicationform.renewalFrequency" style="width:200px;"></el-input>
|
||
</el-form-item>
|
||
<div class="warning">
|
||
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>更新频率可以根据链路带宽进行设置。
|
||
</div>
|
||
<el-form-item label="类型：" style="margin-bottom: 20px;">
|
||
<el-radio-group v-model="communicationform.type" >
|
||
<el-radio label="快速-用于高带宽连接"></el-radio>
|
||
<el-radio label="平衡-适用于大多数连接"></el-radio>
|
||
<el-radio label="慢速-用于低带宽连接"></el-radio>
|
||
<el-radio label="自定义"></el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="请求轻型有效载荷：" v-if="communicationform.type=='自定义'">
|
||
<el-input v-model="communicationform.name" style="width:200px;margin-bottom: 20px;"></el-input>ms
|
||
</el-form-item>
|
||
<el-form-item label="请求重型有效载荷：" v-if="communicationform.type=='自定义'">
|
||
<el-input v-model="communicationform.name" style="width:200px;margin-bottom: 20px;"></el-input>ms
|
||
</el-form-item>
|
||
<el-form-item label="FPS分配器：" v-if="communicationform.type=='自定义'">
|
||
<el-input v-model="communicationform.name" style="width:200px;margin-bottom: 20px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="框架决议：" v-if="communicationform.type=='自定义'">
|
||
<el-select v-model="communicationform.region" placeholder="框架决议" style="margin-bottom: 20px;">
|
||
<el-option label="自动" value="shanghai"></el-option>
|
||
<el-option label="区域二" value="beijing"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="压缩格式：" v-if="communicationform.type=='自定义'">
|
||
<el-select v-model="communicationform.region" placeholder="压缩格式" style="margin-bottom: 20px;">
|
||
<el-option label="JPG" value="shanghai"></el-option>
|
||
<el-option label="区域二" value="beijing"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="压缩率：" v-if="communicationform.type=='自定义'">
|
||
<el-input v-model="communicationform.name" style="width:200px"></el-input>
|
||
</el-form-item>
|
||
<el-button type="primary" @click="handleagain()" size="small" style="width:150px" >保存</el-button>
|
||
</el-form>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import mqtt from "mqtt"; // mqtt协议
|
||
export default {
|
||
data() {
|
||
return {
|
||
sizeForm: {
|
||
name: '',
|
||
region: '',
|
||
date1: '',
|
||
date2: '',
|
||
delivery: false,
|
||
type: [],
|
||
resource: '',
|
||
desc: ''
|
||
},
|
||
formInline: {
|
||
user: '',
|
||
region: ''
|
||
},
|
||
//最上部表单
|
||
topForm:{
|
||
|
||
},
|
||
//坐标转换
|
||
coordinateForm:{
|
||
coordinateClose:false,
|
||
model:'Georeferencing',
|
||
coordinateTransformation:'84坐标系',
|
||
},
|
||
coordinateTableData:[
|
||
{
|
||
name:'11',
|
||
longitude:'111',
|
||
inIp:'01',
|
||
latitude:''
|
||
},{
|
||
name:'22',
|
||
longitude:'222',
|
||
inIp:'02',
|
||
latitude:''
|
||
},{
|
||
name:'33',
|
||
longitude:'333',
|
||
inIp:'03',
|
||
latitude:''
|
||
},
|
||
],
|
||
//车道识别配置
|
||
laneform: {
|
||
laneClose:false,
|
||
areaDetector:false,
|
||
sectionDetector:false,
|
||
},
|
||
//识别区域
|
||
identificationAreaform: {
|
||
identificationAreaClose:false
|
||
},
|
||
//轨迹平滑
|
||
trajectorySmoothingform: {
|
||
trajectorySmoothingClose:false,
|
||
time:''
|
||
},
|
||
// 车牌识别
|
||
licensePlateform: {
|
||
licensePlateClose:false,
|
||
},
|
||
licensePlateTableData:[
|
||
{
|
||
thresholdValue:'11',
|
||
sectionPlate:'111',
|
||
inIp:'01',
|
||
setAssociation:''
|
||
},{
|
||
thresholdValue:'22',
|
||
sectionPlate:'222',
|
||
inIp:'02',
|
||
setAssociation:''
|
||
},{
|
||
thresholdValue:'33',
|
||
sectionPlate:'333',
|
||
inIp:'03',
|
||
setAssociation:''
|
||
},
|
||
],
|
||
//停车状态
|
||
stopStateform: {
|
||
displacement:'2000',
|
||
speed:'2000',
|
||
acceleration:'2000',
|
||
},
|
||
//通信设置
|
||
communicationform: {
|
||
type:'快速-用于高带宽连接',
|
||
renewalFrequency:''
|
||
},
|
||
form: {
|
||
name: '',
|
||
region: '',
|
||
date1: '',
|
||
date2: '',
|
||
delivery: false,
|
||
type: [],
|
||
resource: '',
|
||
desc: ''
|
||
},
|
||
tableData: [
|
||
{
|
||
name:'11',
|
||
inPort:'111',
|
||
inIp:'01'
|
||
},{
|
||
name:'22',
|
||
inPort:'222',
|
||
inIp:'02'
|
||
},{
|
||
name:'33',
|
||
inPort:'333',
|
||
inIp:'03'
|
||
},
|
||
],
|
||
internalIpList: [],
|
||
fileList: []
|
||
};
|
||
},
|
||
created() {
|
||
// this.getDataByMqtt()
|
||
// this.testMqtt()
|
||
// var iframe = document.getElementById("mapModule");
|
||
// iframe.onload = function () {
|
||
// setTimeout(() => {
|
||
// this.testMqtt()
|
||
// }, 5000);
|
||
// };
|
||
// iframe.onload = () => {
|
||
// setTimeout(() => {
|
||
// this.load()
|
||
// }, 5000);// 这样每次都会触发
|
||
// }
|
||
|
||
},
|
||
methods: {
|
||
|
||
load(){
|
||
console.log("1111")
|
||
var iframe = document.getElementById("mapModuleTop");
|
||
console.log("iframe",iframe)
|
||
iframe.onload = () => {
|
||
// setTimeout(() => {
|
||
this.testMqtt()
|
||
// }, 5000);
|
||
}
|
||
},
|
||
testMqtt() {
|
||
console.log("222")
|
||
this.getDataByMqtt()
|
||
|
||
},
|
||
handleChange(){},
|
||
handleagain() {
|
||
this.$confirm('此操作将重新启动系统, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
})
|
||
.then(() => {
|
||
// this.$message({
|
||
// type: 'success',
|
||
// message: '删除成功!'
|
||
// });
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消'
|
||
});
|
||
});
|
||
},
|
||
handleReset() {
|
||
this.$confirm('此操作将重置默认值, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
})
|
||
.then(() => {
|
||
// this.$message({
|
||
// type: 'success',
|
||
// message: '删除成功!'
|
||
// });
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消重置'
|
||
});
|
||
});
|
||
},
|
||
handleRemove(file, fileList) {
|
||
console.log(file, fileList);
|
||
},
|
||
handlePreview(file) {
|
||
console.log(file);
|
||
},
|
||
handleExceed(files, fileList) {
|
||
this.$message.warning(
|
||
`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
|
||
);
|
||
},
|
||
beforeRemove(file, fileList) {
|
||
return this.$confirm(`确定移除 ${file.name}？`);
|
||
},
|
||
// 获取列表
|
||
getReverseShellList() {
|
||
// getShellList().then(res => {
|
||
// if (res.code === 200) {
|
||
// if (res.data && res.data.length > 0) {
|
||
// // 获取到的数据加上 isEdit是false， 默认是文本
|
||
// res.data.forEach(item => {
|
||
// item['isEdit'] = false
|
||
// })
|
||
// }
|
||
// this.tableData = res.data
|
||
// 在表格列表前插入一行，用来新增数据
|
||
this.tableData.unshift({
|
||
name: '',
|
||
inIp: '',
|
||
inPort: null,
|
||
outPort: null,
|
||
enabled: null,
|
||
isEdit: true
|
||
})
|
||
// }
|
||
// })
|
||
},
|
||
// 新增按钮
|
||
handleAdd(row) {
|
||
for (let key in row) {
|
||
// 判断一行字段是否输入完整
|
||
if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {
|
||
this.msgError('Please complete the information')
|
||
return
|
||
}
|
||
}
|
||
const params = {
|
||
name: row.name,
|
||
inIp: row.inIp,
|
||
// inPort: parseInt(row.inPort),
|
||
// outPort: parseInt(row.outPort),
|
||
// enabled: row.enabled
|
||
}
|
||
this.getReverseShellList()
|
||
// addShell(params).then(res => {
|
||
// if (res.code === 200) {
|
||
// this.msgSuccess('Add reverse shell successfully')
|
||
// row.isEdit = false
|
||
// this.getReverseShellList()
|
||
// }
|
||
// })
|
||
},
|
||
// 编辑或者Apply按钮
|
||
handleUpdate(row) {
|
||
// 点击Apply时
|
||
if (row.isEdit) {
|
||
for (let key in row) {
|
||
if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {
|
||
this.msgError('Please complete the information')
|
||
return
|
||
}
|
||
}
|
||
const params = {
|
||
name: row.name,
|
||
inIp: row.inIp,
|
||
inPort: parseInt(row.inPort),
|
||
outPort: parseInt(row.outPort),
|
||
enabled: row.enabled
|
||
}
|
||
// updateShell(params).then(res => {
|
||
// if (res.code === 200) {
|
||
// this.msgSuccess('Update reverse shell successfully')
|
||
// this.getReverseShellList()
|
||
// }
|
||
// })
|
||
} else {
|
||
// 点击编辑时
|
||
row.isEdit = true
|
||
}
|
||
},
|
||
// 删除或取消按钮
|
||
handleDelete(row) {
|
||
// 点击取消时
|
||
if (row.isEdit) {
|
||
this.getReverseShellList()
|
||
} else {
|
||
// 点击删除时
|
||
this.$confirm('Are you sure to delete reverse shell?', 'warning', {
|
||
confirmButtonText: 'Sure',
|
||
cancelButtonText: 'Cancel',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
// deleteShell(row.name).then(res => {
|
||
// if (res.code === 200) {
|
||
// this.msgSuccess('Delete reverse shell successfully')
|
||
// this.getReverseShellList()
|
||
// }
|
||
// })
|
||
}).catch(() => {
|
||
})
|
||
}
|
||
},
|
||
// mqtt订阅（独立）
|
||
getDataByMqtt(url, topic, cIdNum) {
|
||
// var that = this
|
||
// that.$refs.iframe.contentWindow.getDestination(1)
|
||
// console.log("1111",document.getElementById("mapModule"))
|
||
// document.getElementById("mapModule").contentWindow.getDestination(1)
|
||
const clientId = "test_id_" + String(new Date().getTime()); // 用户名
|
||
// const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
|
||
const host = 'ws://172.16.1.168:10087/';
|
||
|
||
const options = {
|
||
// 配置
|
||
// 测试：订阅本机IP
|
||
// host: host,
|
||
// port: port,
|
||
// host:"172.16.1.168:10086",
|
||
keepalive: 60, // 心跳时间，默认60s，设置为0禁用
|
||
username: 'admin', // 用户名（可选）
|
||
password: '123456', // 密码（可选）
|
||
clientId: clientId, // 客户端ID，默认随机生成
|
||
protocolId: "MQTT",
|
||
protocolVersion: 4,
|
||
clean: true, // false在离线时接收QoS1和2的消息
|
||
reconnectPeriod: 2000, // 重连间隔，默认1000毫秒
|
||
connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
|
||
will: {
|
||
// 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）
|
||
topic: "img1", // 要发布的主题
|
||
payload: "[MQTT-TEST] 遗嘱消息：连接异常断开！", // 要发布的消息
|
||
qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
|
||
retain: false, // 保留标志
|
||
},
|
||
};
|
||
if (this.mqttClient == undefined) {
|
||
this.mqttClient = mqtt.connect(host, options); // 连接
|
||
// const client = mqtt.connect(host, options); // 连接
|
||
// const client = mqtt.connect(host) // 连接
|
||
// 错误回调
|
||
// console.log("this.mqttClient", this.mqttClient)
|
||
this.mqttClient.on("error", (err) => {
|
||
console.log("[MQTT-TEST] 连接错误：", err);
|
||
this.mqttClient.end();
|
||
});
|
||
// 重连回调
|
||
this.mqttClient.on("reconnect", (reconnect) => {
|
||
// console.log("[MQTT-TEST] 重连中……", reconnect);
|
||
});
|
||
// 连接回调
|
||
this.mqttClient.on("connect", (connect) => {
|
||
// console.log("[MQTT-TEST] 已连接的客户端ID: ", connect);
|
||
// 订阅
|
||
this.mqttClient.subscribe('img0', { qos: 0 });
|
||
this.mqttClient.subscribe('img1', { qos: 0 });
|
||
this.mqttClient.subscribe('img2', { qos: 0 });
|
||
this.mqttClient.subscribe('img3', { qos: 0 });
|
||
this.mqttClient.subscribe('img4', { qos: 0 });
|
||
this.mqttClient.subscribe('img5', { qos: 0 });
|
||
this.mqttClient.subscribe('stream0', { qos: 0 });
|
||
this.mqttClient.subscribe('stream1', { qos: 0 });
|
||
this.mqttClient.subscribe('stream2', { qos: 0 });
|
||
this.mqttClient.subscribe('stream3', { qos: 0 });
|
||
this.mqttClient.subscribe('stream4', { qos: 0 });
|
||
this.mqttClient.subscribe('stream5', { qos: 0 });
|
||
|
||
});
|
||
// 接收回调
|
||
this.mqttClient.on("message", (topic, message, packet) => {
|
||
|
||
if (topic.indexOf("img0") != -1) {
|
||
// try {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
// debugger
|
||
// console.log("msg", msg) //msg为转换后的JSON数据
|
||
// console.log("msg.pic", msg.pic)
|
||
// debugger
|
||
// var that = this
|
||
|
||
// document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
|
||
// window.parent.getDestination(JSON.stringify(msg));
|
||
// debugger
|
||
// unity.SendMessage('AAA', 'SendImage', JSON.stringify(msg));
|
||
// this.imgUrl = 'data:image/png;base64,' + msg.pic;
|
||
// console.log("imageUrl", imageUrl)
|
||
|
||
// }
|
||
// catch {
|
||
// let imageType = 'arraybuffer';
|
||
// const blob = new Blob([message], { type: imageType })
|
||
// const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||
// // console.log("imageUrl", imageUrl)
|
||
// }
|
||
} else if (topic.indexOf("img1") != -1) {
|
||
try {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
console.log("msg", msg) //msg为转换后的JSON数据
|
||
this.imgUrl1 = 'data:image/png;base64,' + msg.pic;
|
||
console.log("imageUrl", imageUrl)
|
||
} catch {
|
||
let imageType = 'arraybuffer';
|
||
const blob = new Blob([message], { type: imageType })
|
||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||
console.log("imageUrl", imageUrl)
|
||
}
|
||
} else if (topic.indexOf("img2") != -1) {
|
||
try {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
console.log("msg", msg) //msg为转换后的JSON数据
|
||
this.imgUrl2 = 'data:image/png;base64,' + msg.pic;
|
||
console.log("imageUrl", imageUrl)
|
||
} catch {
|
||
let imageType = 'arraybuffer';
|
||
const blob = new Blob([message], { type: imageType })
|
||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||
console.log("imageUrl", imageUrl)
|
||
}
|
||
} else if (topic.indexOf("img3") != -1) {
|
||
try {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
console.log("msg", msg) //msg为转换后的JSON数据
|
||
this.imgUrl3 = 'data:image/png;base64,' + msg.pic;
|
||
console.log("imageUrl", imageUrl)
|
||
} catch {
|
||
let imageType = 'arraybuffer';
|
||
const blob = new Blob([message], { type: imageType })
|
||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||
console.log("imageUrl", imageUrl)
|
||
}
|
||
} else if (topic.indexOf("img4") != -1) {
|
||
try {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
console.log("msg", msg) //msg为转换后的JSON数据
|
||
this.imgUrl4 = 'data:image/png;base64,' + msg.pic;
|
||
console.log("imageUrl", imageUrl)
|
||
} catch {
|
||
let imageType = 'arraybuffer';
|
||
const blob = new Blob([message], { type: imageType })
|
||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||
console.log("imageUrl", imageUrl)
|
||
}
|
||
} else if (topic.indexOf("img5") != -1) {
|
||
try {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
console.log("msg", msg) //msg为转换后的JSON数据
|
||
this.imgUrl5 = 'data:image/png;base64,' + msg.pic;
|
||
console.log("imageUrl", imageUrl)
|
||
} catch {
|
||
let imageType = 'arraybuffer';
|
||
const blob = new Blob([message], { type: imageType })
|
||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||
console.log("imageUrl", imageUrl)
|
||
}
|
||
} else if (topic.indexOf("stream0") != -1) {
|
||
// console.log(
|
||
// `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||
// new Date(),
|
||
// new Date().getMilliseconds()
|
||
// );
|
||
} else if (topic.indexOf("stream0") != -1) {
|
||
// console.log(
|
||
// `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||
// new Date(),
|
||
// new Date().getMilliseconds()
|
||
// );
|
||
} else if (topic.indexOf("stream1") != -1) {
|
||
console.log(
|
||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||
new Date(),
|
||
new Date().getMilliseconds()
|
||
);
|
||
} else if (topic.indexOf("stream2") != -1) {
|
||
console.log(
|
||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||
new Date(),
|
||
new Date().getMilliseconds()
|
||
);
|
||
} else if (topic.indexOf("stream3") != -1) {
|
||
console.log(
|
||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||
new Date(),
|
||
new Date().getMilliseconds()
|
||
);
|
||
} else if (topic.indexOf("stream4") != -1) {
|
||
console.log(
|
||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||
new Date(),
|
||
new Date().getMilliseconds()
|
||
);
|
||
} else if (topic.indexOf("stream5") != -1) {
|
||
console.log(
|
||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||
new Date(),
|
||
new Date().getMilliseconds()
|
||
);
|
||
}
|
||
|
||
});
|
||
}
|
||
|
||
|
||
},
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// /deep/ .el-form-item__content {
|
||
// display: flex;
|
||
// flex-flow: row nowrap;
|
||
// align-items: center;
|
||
// }
|
||
// /deep/ .el-form-item__label {
|
||
// text-align: left;
|
||
// font-size: 16px;
|
||
// }
|
||
.dataBoard {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.top .section {
|
||
// width: 80%;
|
||
// border: 1px solid gray;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
margin-bottom: 1%;
|
||
}
|
||
.dataBoard .region,
|
||
.dataBoard .section {
|
||
width: 80%;
|
||
// border: 1px solid gray;
|
||
border: 1px solid #E4E7ED;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
margin-bottom: 3%;
|
||
}
|
||
|
||
.dataBoard .board-title {
|
||
font-size: 17px;
|
||
font-weight: bolder;
|
||
position: relative;
|
||
margin-bottom: 30px;
|
||
}
|
||
.container {
|
||
width: 100%;
|
||
height: 100%;
|
||
p {
|
||
width: 95%;
|
||
font-size: 25px;
|
||
text-align: left;
|
||
border-bottom: 1px solid black;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
</style>
|
||
|