1315 lines
63 KiB
Vue
1315 lines
63 KiB
Vue
<template>
|
||
<div class="analysis">
|
||
<div class="top" style="margin-top:10px">
|
||
<div class="section">
|
||
<el-form :inline="true" v-if="false" :model="formInline" class="demo-form-inline" label-width="fit-content">
|
||
<div class="warning">
|
||
<p class="board-title">自动保存</p>
|
||
<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="fit-content" style="margin-top:15px">
|
||
<div class="warning" v-if="false">
|
||
<p class="board-title">重置分析</p>
|
||
<i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i>重置分析将删除所有累计的轨迹数据
|
||
</div>
|
||
<!-- <el-form-item > -->
|
||
<el-button v-if="false" type="primary" @click="handleagain()" size="small" style="width: 150px">重置</el-button>
|
||
<div class="warning" style="margin-top:15px" @click="handleContent('postion')">
|
||
<i
|
||
:class="contentShow.postion == false ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"
|
||
style="font-weight: 600;font-size: 18px;margin-right: 5px;"
|
||
></i>
|
||
<p class="board-title">相机位置</p>
|
||
<i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i> 在 WGS84 坐标系中输入相机位置
|
||
</div>
|
||
<el-form-item label="相机位置：" v-if="contentShow.postion">
|
||
<el-input v-model="sizeForm.longitude" size="small" style="width: 150px" placeholder="经度"></el-input>
|
||
<el-input
|
||
v-model="sizeForm.latitude"
|
||
size="small"
|
||
style="width: 150px; margin-left: 20px"
|
||
placeholder="纬度"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div style="margin-top: 15px" v-if="contentShow.postion">
|
||
<el-button type="primary" @click="handSaveitude()" size="small" style="width: 150px">保存</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dataBoard">
|
||
<div class="section">
|
||
<div class="warning" @click="handleContent('coordinate')">
|
||
<i
|
||
:class="contentShow.coordinate == false ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"
|
||
style="font-weight: 600;font-size: 18px;margin-right: 5px;"
|
||
></i>
|
||
<p class="board-title">坐标转换</p>
|
||
<i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
|
||
>通过将图像坐标系转换为物理坐标系，地理参考使您能够将像素测量转换为真实速度和距离。
|
||
</div>
|
||
<el-form ref="form" :model="coordinateForm" label-width="fit-content" v-if="contentShow.coordinate">
|
||
<!-- <el-form-item label="坐标转换开关：">
|
||
<el-switch v-model="coordinateForm.coordinateClose"></el-switch>
|
||
</el-form-item> -->
|
||
<el-form-item label="UTM区：" class="otherThings">
|
||
<el-input-number
|
||
v-model="coordinateForm.num"
|
||
controls-position="right"
|
||
:precision="0"
|
||
size="small"
|
||
:min="1"
|
||
:max="60"
|
||
></el-input-number>
|
||
<div class="warning" style="margin:0px">
|
||
<i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
|
||
>地理参照允许测量物理速度和静态图像源的距离,值范围1-60。
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="半球：">
|
||
<el-select size="small" v-model="coordinateForm.value" placeholder="请选择">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="坐标转换：">
|
||
<el-radio-group v-model="coordinateForm.coordinateTransformation">
|
||
<el-radio label="WGS-84坐标系"></el-radio>
|
||
<el-radio label="其他"></el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<div style="width: 100%; height: 702px; margin-bottom: 10px">
|
||
<iframe ref="analysisWeb" src="./analysisWeb/index.html" frameborder="0" style="width: 100%; height: 100%"></iframe>
|
||
</div>
|
||
<div class="warning">
|
||
<el-button size="mini" type="primary" style="color: #fffff" @click="handleDian">新增点 </el-button>
|
||
<i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i>请至少配置4个点，不满足4个点会没有数据。
|
||
</div>
|
||
<el-table border :data="coordinateTableData">
|
||
<template slot="empty">
|
||
<el-empty :image-size="100" description="暂无数据"></el-empty>
|
||
</template>
|
||
<el-table-column prop="pointName" label="点名称" align="center">
|
||
<template slot-scope="scope">
|
||
<el-input
|
||
:disabled="scope.row.btnShow == '1' ? true : false"
|
||
v-model="scope.row.pointName"
|
||
maxlength="30"
|
||
placeholder="请输入"
|
||
@blur="updateName($event)"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="longitude" label="经度" align="center">
|
||
<template slot-scope="scope">
|
||
<el-input
|
||
:disabled="scope.row.btnShow == '1' ? true : false"
|
||
v-model="scope.row.longitude"
|
||
maxlength="20"
|
||
placeholder="请输入"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="latitude" label="纬度" align="center">
|
||
<template v-slot="{ row, $index }">
|
||
<el-input
|
||
:disabled="row.btnShow == '1' ? true : false"
|
||
v-model="row.latitude"
|
||
maxlength="20"
|
||
placeholder="请输入"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="oldName" label="旧名字" align="center" v-if="laneform.laneClose == true">
|
||
<template slot-scope="scope">
|
||
<el-input v-model="scope.row.oldName" maxlength="20" placeholder="请输入" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||
<template v-slot="{ row, $index }">
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
style="color: #2090c1"
|
||
v-if="row.btnShow == '1' ? true : false"
|
||
@click="handleExit(row, $index)"
|
||
>编辑
|
||
</el-button>
|
||
<el-button size="mini" type="text" style="color: #2090c1" v-else @click="handleconfirm(row, $index)"
|
||
>确认编辑
|
||
</el-button>
|
||
<el-button size="mini" type="text" style="color: #f56c6c" @click="handleDeleteDian(row, $index)"
|
||
>删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div style="margin-top: 15px">
|
||
<el-button
|
||
type="primary"
|
||
:disabled="coordinateTableData.length < 4"
|
||
@click="handlePos()"
|
||
size="small"
|
||
style="width: 150px"
|
||
>保存</el-button
|
||
>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<div class="dataBoard" v-if="false">
|
||
<div class="section">
|
||
<div class="warning">
|
||
<p class="board-title">车道识别配置</p>
|
||
<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: 400px" v-if="laneform.laneClose == true">
|
||
<iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height: 100%"></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" v-if="false">
|
||
<div class="section">
|
||
<div class="warning">
|
||
<p class="board-title">识别区域</p>
|
||
<i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
|
||
>您可以自定义进行视频分析的区域，区域之外的部分将被忽略。此功能可以帮助您检测和跟踪高分辨率视频特定部分的较小对象，实现检测器的数字变焦功能。
|
||
</div>
|
||
|
||
<el-form ref="form" :model="identificationAreaform" label-width="fit-content">
|
||
<!-- <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: 400px" v-if="identificationAreaform.identificationAreaClose == true">
|
||
<iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height: 100%"></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" v-if="false">
|
||
<div class="section">
|
||
<div class="warning">
|
||
<p class="board-title">轨迹平滑</p>
|
||
<i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
|
||
>为轨迹预测滤波算法定义细化轨迹的时间窗口。数值越小，延迟越小，适用于实时性要求高的场景；数值越大，轨迹的连续性越好，目标即使越过一些障碍也不容易丢失。
|
||
</div>
|
||
<el-form ref="form" :model="trajectorySmoothingform" label-width="fit-content">
|
||
<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">
|
||
<div class="warning" @click="handleContent('plate')">
|
||
<i
|
||
:class="contentShow.plate == false ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"
|
||
style="font-weight: 600;font-size: 18px;margin-right: 5px;"
|
||
></i>
|
||
<p class="board-title">车牌识别</p>
|
||
<i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
|
||
>车牌识别开关。牌照信息表示与目标属性。（断面号牌，与断面设置关联）
|
||
</div>
|
||
<el-form ref="form" :model="licensePlateform" label-width="fit-content" v-if="contentShow.plate">
|
||
<el-form-item label="车牌识别开关：">
|
||
<el-switch
|
||
v-model="licensePlateform.licensePlateClose"
|
||
active-value="1"
|
||
inactive-value="0"
|
||
@change="changeChepai($event)"
|
||
></el-switch>
|
||
</el-form-item>
|
||
<!-- <div style="width: 100%; height: 400px; margin-bottom: 10px" v-if="licensePlateform.licensePlateClose == true"> -->
|
||
<div style="width: 100%; height: 400px; margin-bottom: 10px" v-if="false">
|
||
<iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height: 100%"></iframe>
|
||
</div>
|
||
<!-- <el-table border :data="licensePlateTableData" v-if="licensePlateform.licensePlateClose == true"> -->
|
||
<el-table border :data="licensePlateTableData" v-if="false">
|
||
<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" v-if="false">
|
||
<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">
|
||
<div class="warning" @click="handleContent('parking')">
|
||
<i
|
||
:class="contentShow.parking == false ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"
|
||
style="font-weight: 600;font-size: 18px;margin-right: 5px;"
|
||
></i>
|
||
<p class="board-title">停车状态</p>
|
||
<i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
|
||
>位移、速度，例如位移＜δ，速度＜v，则判断车辆停车
|
||
</div>
|
||
<el-form
|
||
:inline="true"
|
||
:model="stopStateform"
|
||
class="demo-form-inline"
|
||
label-width="fit-content"
|
||
v-if="contentShow.parking"
|
||
>
|
||
<el-form-item label="位移：" style="margin-right:10px">
|
||
<el-input-number
|
||
v-model="stopStateform.displacement"
|
||
@change="handleChange"
|
||
:min="0"
|
||
:max="3000"
|
||
label="位移"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
<el-form-item label="速度：" style="margin-right:10px">
|
||
<el-input-number
|
||
v-model="stopStateform.speed"
|
||
@change="handleChange"
|
||
:min="0"
|
||
:max="3000"
|
||
label="速度"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
<el-form-item label="加速度：" v-if="false">
|
||
<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" v-if="contentShow.parking">
|
||
<el-button type="primary" @click="handleParking()" size="small" style="width: 150px">保存</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dataBoard" v-if="false">
|
||
<div class="section">
|
||
<div class="warning">
|
||
<p class="board-title">通信设置</p>
|
||
<i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i>更新频率可以根据链路带宽进行设置。
|
||
</div>
|
||
<el-form :model="communicationform" class="demo-form-inline" label-width="fit-content">
|
||
<el-form-item label="更新频率：">
|
||
<el-input v-model="communicationform.renewalFrequency" style="width: 200px"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="类型：" style="display:flex">
|
||
<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>
|
||
<!-- <el-dialog
|
||
title="新增点"
|
||
:visible.sync="dialogVisible"
|
||
width="30%"
|
||
>
|
||
<el-form ref="addform" :rules="formRules" :model="addDianForm" label-position="left" label-width="85px">
|
||
<el-form-item label="点名称：" prop="pointName" style="margin-bottom:15px">
|
||
<el-col :span="16">
|
||
<el-input v-model="addDianForm.pointName" placeholder="请输入点名称" @blur="phoneChange($event)"></el-input>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="经度：" style="margin-bottom:15px" prop="longitude">
|
||
<el-col :span="16">
|
||
<el-input v-model="addDianForm.longitude" oninput ="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入经度"></el-input>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="纬度：" prop="latitude">
|
||
<el-col :span="16">
|
||
<el-input v-model="addDianForm.latitude" oninput ="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入纬度"></el-input>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="旧名称：" prop="latitude" v-if="laneform.laneClose == true">
|
||
<el-col :span="16">
|
||
<el-input v-model="addDianForm.oldName"></el-input>
|
||
</el-col>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="handleDian('addform')">确 定</el-button>
|
||
</span>
|
||
</el-dialog> -->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import mqtt from 'mqtt'; // mqtt协议
|
||
import { getFeixpz, setCameraPosition, setLicensePlate, setParkingStatus, setFeixzbzh } from '@/api/index';
|
||
export default {
|
||
props: {
|
||
analysisConfigurationdata: {
|
||
default: () => false,
|
||
type: Object,
|
||
required: true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
unityDone: false,
|
||
oldName: '',
|
||
formRules: {
|
||
pointName: [{ required: true, message: '请输入点名称', trigger: 'blur' }],
|
||
longitude: [{ required: true, message: '请输入经度', trigger: 'blur' }],
|
||
latitude: [{ required: true, message: '请输入纬度', trigger: 'blur' }]
|
||
},
|
||
addDianForm: {
|
||
pointName: '',
|
||
longitude: '',
|
||
latitude: '',
|
||
oldName: ''
|
||
},
|
||
dialogVisible: false,
|
||
coordinateTransformationId: '',
|
||
AnalysisSettingId: '',
|
||
contentShow: {
|
||
postion: true,
|
||
coordinate: false,
|
||
plate: true,
|
||
parking: true
|
||
},
|
||
sizeForm: {
|
||
name: '',
|
||
region: '',
|
||
date1: '',
|
||
date2: '',
|
||
delivery: false,
|
||
type: [],
|
||
resource: '',
|
||
desc: '',
|
||
longitude: '',
|
||
latitude: ''
|
||
},
|
||
formInline: {
|
||
user: '',
|
||
region: ''
|
||
},
|
||
//最上部表单
|
||
topForm: {},
|
||
//坐标转换
|
||
coordinateForm: {
|
||
coordinateClose: false,
|
||
model: 'Georeferencing',
|
||
coordinateTransformation: '84坐标系',
|
||
value: '0',
|
||
num: 1
|
||
},
|
||
options: [
|
||
{
|
||
value: '南',
|
||
label: '南'
|
||
},
|
||
{
|
||
value: '北',
|
||
label: '北'
|
||
}
|
||
],
|
||
coordinateTableData: [],
|
||
//车道识别配置
|
||
laneform: {
|
||
laneClose: false,
|
||
areaDetector: false,
|
||
sectionDetector: false
|
||
},
|
||
//识别区域
|
||
identificationAreaform: {
|
||
identificationAreaClose: false
|
||
},
|
||
//轨迹平滑
|
||
trajectorySmoothingform: {
|
||
trajectorySmoothingClose: false,
|
||
time: ''
|
||
},
|
||
// 车牌识别
|
||
licensePlateform: {
|
||
licensePlateClose: 0
|
||
},
|
||
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: []
|
||
};
|
||
},
|
||
watch: {
|
||
analysisConfigurationdata: {
|
||
handler: function(old, newV) {
|
||
// console.log("old",old)
|
||
// console.log("newV",newV)
|
||
if (newV != null && this.unityDone == true) {
|
||
console.log(newV, 'yyy');
|
||
this.$refs.analysisWeb.contentWindow.getDestination(newV);
|
||
}
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
// this.getDataByMqtt()
|
||
// this.testMqtt()
|
||
// var iframe = document.getElementById("mapModule");
|
||
// iframe.onload = function () {
|
||
// setTimeout(() => {
|
||
// this.testMqtt()
|
||
// }, 5000);
|
||
// };
|
||
// iframe.onload = () => {
|
||
// setTimeout(() => {
|
||
// this.load()
|
||
// }, 5000);// 这样每次都会触发
|
||
// }
|
||
getFeixpz({ VideoId: this.$route.query.id }).then(res => {
|
||
this.sizeForm.longitude = res.data.data.cameraPositionLongitude;
|
||
this.sizeForm.latitude = res.data.data.cameraPositionLatitude;
|
||
this.coordinateForm.num = res.data.data.utmArea == '-1' ? '' : res.data.data.utmArea;
|
||
this.coordinateForm.value = res.data.data.hemisphere;
|
||
this.coordinateForm.coordinateTransformation = res.data.data.coordinateTransformation;
|
||
this.coordinateTableData =
|
||
res.data.data.pointData != null
|
||
? res.data.data.pointData.map(item => {
|
||
return { ...item, btnShow: '1' };
|
||
})
|
||
: [];
|
||
this.licensePlateform.licensePlateClose = res.data.data.licensePlateRecognitionSwitch;
|
||
this.stopStateform.displacement = res.data.data.parkingDisplacement;
|
||
this.stopStateform.speed = res.data.data.parkingSpeed;
|
||
this.AnalysisSettingId = res.data.data.analysisSettingId;
|
||
this.coordinateTransformationId = res.data.data.coordinateTransformationId;
|
||
this.coordinateTableData.forEach(item => {
|
||
item.btnShow = '1';
|
||
});
|
||
});
|
||
},
|
||
mounted() {
|
||
window.OnSceneload = this.OnSceneload;
|
||
window.saveCoordinate = this.saveCoordinate;
|
||
},
|
||
methods: {
|
||
saveCoordinate(obj) {
|
||
console.log(obj);
|
||
this.coordinateTableData.forEach(item => {
|
||
if (item.pointName == obj.pointName) {
|
||
item.imageXCoordinate = obj.imageXCoordinate;
|
||
item.imageYCoordinate = obj.imageYCoordinate;
|
||
}
|
||
});
|
||
},
|
||
|
||
updateName(val) {
|
||
console.log('val', val.target.value);
|
||
},
|
||
handleExit(row, index) {
|
||
// this.oldName = row.pointName
|
||
row.oldName = row.pointName;
|
||
this.$refs.analysisWeb.contentWindow.exitPoint(row.pointName);
|
||
row.btnShow = '2';
|
||
// this.$set(this.coordinateTableData, index, row);
|
||
},
|
||
handleconfirm(row, index) {
|
||
var bol = this.coordinateTableData.some((item, indexa) => item.pointName == row.pointName && indexa != index);
|
||
if (bol == true) {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '该点位已存在'
|
||
});
|
||
return false;
|
||
}
|
||
var string = row.oldName + ',' + row.pointName;
|
||
this.$refs.analysisWeb.contentWindow.saveDian(string);
|
||
row.btnShow = '1';
|
||
row.oldName = row.pointName;
|
||
// this.$set(this.coordinateTableData, index, row);
|
||
},
|
||
OnSceneload(newV) {
|
||
this.$refs.analysisWeb.contentWindow.getDianwei(this.$route.query.id);
|
||
this.unityDone = true;
|
||
},
|
||
handleDeleteDian(row, idx) {
|
||
this.$confirm('此操作将删除该点位, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
})
|
||
.then(() => {
|
||
this.coordinateTableData.splice(idx, 1);
|
||
// this.coordinateTableData = this.coordinateTableData.filter(item => item.pointName != row.pointName);
|
||
this.$refs.analysisWeb.contentWindow.deletePoint(row.oldName);
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功!'
|
||
});
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消删除'
|
||
});
|
||
});
|
||
},
|
||
handleDian() {
|
||
const newPointData = {
|
||
btnShow: '2',
|
||
longitude: '0',
|
||
latitude: '0'
|
||
};
|
||
newPointData.oldName = newPointData.pointName = String(new Date().getTime());
|
||
this.coordinateTableData.unshift(newPointData);
|
||
this.$refs.analysisWeb.contentWindow.setPOS(newPointData.pointName);
|
||
},
|
||
phoneChange(e) {
|
||
console.log('e', e.currentTarget.value);
|
||
this.addDianForm.oldName = e.currentTarget.value;
|
||
},
|
||
handleClose(done) {
|
||
this.$confirm('确认关闭？')
|
||
.then(_ => {
|
||
done();
|
||
})
|
||
.catch(_ => {});
|
||
},
|
||
// 坐标转换接口
|
||
handlePos() {
|
||
if (this.coordinateTableData.some(item => item.btnShow === '2')) {
|
||
this.$message.warning('请先确认编辑');
|
||
return;
|
||
}
|
||
let params = {
|
||
CoordinateTransformationId: this.coordinateTransformationId,
|
||
UTMArea: this.coordinateForm.num == '' ? '-1' : this.coordinateForm.num,
|
||
Hemisphere: this.coordinateForm.value,
|
||
CoordinateTransformation: this.coordinateForm.coordinateTransformation,
|
||
PointData: this.coordinateTableData.map(item => {
|
||
return {
|
||
longitude: item.longitude,
|
||
latitude: item.latitude,
|
||
pointName: item.pointName,
|
||
imageXCoordinate: item.imageXCoordinate,
|
||
imageYCoordinate: item.imageYCoordinate
|
||
};
|
||
})
|
||
};
|
||
setFeixzbzh(params).then(res => {
|
||
this.$message({
|
||
type: 'success',
|
||
message: res.data.msg
|
||
});
|
||
});
|
||
},
|
||
// 停车状态
|
||
handleParking() {
|
||
const params = new URLSearchParams();
|
||
params.append('AnalysisSettingId', this.AnalysisSettingId);
|
||
params.append('ParkingDisplacement', this.stopStateform.displacement);
|
||
params.append('ParkingSpeed', this.stopStateform.speed);
|
||
setParkingStatus(params).then(res => {
|
||
this.$message({
|
||
type: 'success',
|
||
message: res.data.msg
|
||
});
|
||
});
|
||
},
|
||
// 车牌识别
|
||
changeChepai(val) {
|
||
console.log(val, 'val111');
|
||
const params = new URLSearchParams();
|
||
params.append('AnalysisSettingId', this.AnalysisSettingId);
|
||
params.append('LicensePlateRecognitionSwitch', val);
|
||
setLicensePlate(params).then(res => {
|
||
this.$message({
|
||
type: 'success',
|
||
message: res.data.msg
|
||
});
|
||
});
|
||
},
|
||
// 经纬度保存
|
||
handSaveitude() {
|
||
const params = new URLSearchParams();
|
||
params.append('AnalysisSettingId', this.AnalysisSettingId);
|
||
params.append('CameraPositionLongitude', this.sizeForm.longitude);
|
||
params.append('CameraPositionLatitude', this.sizeForm.latitude);
|
||
setCameraPosition(params).then(res => {
|
||
this.$message({
|
||
type: 'success',
|
||
message: res.data.msg
|
||
});
|
||
});
|
||
},
|
||
// 收放
|
||
handleContent(val) {
|
||
if (val == 'postion') {
|
||
this.contentShow.postion = !this.contentShow.postion;
|
||
}
|
||
if (val == 'coordinate') {
|
||
this.contentShow.coordinate = !this.contentShow.coordinate;
|
||
}
|
||
if (val == 'plate') {
|
||
this.contentShow.plate = !this.contentShow.plate;
|
||
}
|
||
if (val == 'parking') {
|
||
this.contentShow.parking = !this.contentShow.parking;
|
||
}
|
||
},
|
||
handleChange(value) {
|
||
console.log(value);
|
||
},
|
||
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;
|
||
// }
|
||
.otherThings {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
align-items: center;
|
||
/deep/ .el-form-item__content {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.analysis {
|
||
.board-title {
|
||
font-size: 17px;
|
||
font-weight: bolder;
|
||
width: max-content;
|
||
}
|
||
}
|
||
.analysis .warning {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
cursor: pointer;
|
||
}
|
||
.dataBoard {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.top .section {
|
||
// width: 80%;
|
||
// border: 1px solid gray;
|
||
box-sizing: border-box;
|
||
padding: 0 15px;
|
||
margin-bottom: 15px;
|
||
}
|
||
.dataBoard .region,
|
||
.dataBoard .section {
|
||
width: 80%;
|
||
// border: 1px solid gray;
|
||
// border: 1px solid #e4e7ed;
|
||
box-sizing: border-box;
|
||
padding: 0 15px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.container {
|
||
width: 100%;
|
||
height: 100%;
|
||
p {
|
||
width: 95%;
|
||
font-size: 25px;
|
||
text-align: left;
|
||
border-bottom: 1px solid black;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
</style>
|