代码提交
This commit is contained in:
commit
0f16142fb4
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue","mtime":1672823213558},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1671074740928},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":1671074747916}],"contextDependencies":[],"result":["import { render, staticRenderFns } from \"./analysisConfiguration.vue?vue&type=template&id=fd3d0d46&scoped=true&\"\nimport script from \"./analysisConfiguration.vue?vue&type=script&lang=js&\"\nexport * from \"./analysisConfiguration.vue?vue&type=script&lang=js&\"\nimport style0 from \"./analysisConfiguration.vue?vue&type=style&index=0&id=fd3d0d46&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"fd3d0d46\",\n null\n \n)\n\n/* hot reload */\nif (module.hot) {\n var api = require(\"D:\\\\视频边缘1215\\\\TransFlow\\\\node_modules\\\\vue-hot-reload-api\\\\dist\\\\index.js\")\n api.install(require('vue'))\n if (api.compatible) {\n module.hot.accept()\n if (!api.isRecorded('fd3d0d46')) {\n api.createRecord('fd3d0d46', component.options)\n } else {\n api.reload('fd3d0d46', component.options)\n }\n module.hot.accept(\"./analysisConfiguration.vue?vue&type=template&id=fd3d0d46&scoped=true&\", function () {\n api.rerender('fd3d0d46', {\n render: render,\n staticRenderFns: staticRenderFns\n })\n })\n }\n}\ncomponent.options.__file = \"src/views/bounced/analysisConfiguration.vue\"\nexport default component.exports"]}
|
||||
{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue","mtime":1672884159767},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1671074740928},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":1671074747916}],"contextDependencies":[],"result":["import { render, staticRenderFns } from \"./analysisConfiguration.vue?vue&type=template&id=fd3d0d46&scoped=true&\"\nimport script from \"./analysisConfiguration.vue?vue&type=script&lang=js&\"\nexport * from \"./analysisConfiguration.vue?vue&type=script&lang=js&\"\nimport style0 from \"./analysisConfiguration.vue?vue&type=style&index=0&id=fd3d0d46&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"fd3d0d46\",\n null\n \n)\n\n/* hot reload */\nif (module.hot) {\n var api = require(\"D:\\\\视频边缘1215\\\\TransFlow\\\\node_modules\\\\vue-hot-reload-api\\\\dist\\\\index.js\")\n api.install(require('vue'))\n if (api.compatible) {\n module.hot.accept()\n if (!api.isRecorded('fd3d0d46')) {\n api.createRecord('fd3d0d46', component.options)\n } else {\n api.reload('fd3d0d46', component.options)\n }\n module.hot.accept(\"./analysisConfiguration.vue?vue&type=template&id=fd3d0d46&scoped=true&\", function () {\n api.rerender('fd3d0d46', {\n render: render,\n staticRenderFns: staticRenderFns\n })\n })\n }\n}\ncomponent.options.__file = \"src/views/bounced/analysisConfiguration.vue\"\nexport default component.exports"]}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
{"remainingRequest":"D:\\Hjm项目\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\Hjm项目\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue","dependencies":[{"path":"D:\\Hjm项目\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue","mtime":1672882315774},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["import { render, staticRenderFns } from \"./analysisConfiguration.vue?vue&type=template&id=fd3d0d46&scoped=true&\"\nimport script from \"./analysisConfiguration.vue?vue&type=script&lang=js&\"\nexport * from \"./analysisConfiguration.vue?vue&type=script&lang=js&\"\nimport style0 from \"./analysisConfiguration.vue?vue&type=style&index=0&id=fd3d0d46&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"fd3d0d46\",\n null\n \n)\n\n/* hot reload */\nif (module.hot) {\n var api = require(\"D:\\\\Hjm项目\\\\TransFlow\\\\node_modules\\\\vue-hot-reload-api\\\\dist\\\\index.js\")\n api.install(require('vue'))\n if (api.compatible) {\n module.hot.accept()\n if (!api.isRecorded('fd3d0d46')) {\n api.createRecord('fd3d0d46', component.options)\n } else {\n api.reload('fd3d0d46', component.options)\n }\n module.hot.accept(\"./analysisConfiguration.vue?vue&type=template&id=fd3d0d46&scoped=true&\", function () {\n api.rerender('fd3d0d46', {\n render: render,\n staticRenderFns: staticRenderFns\n })\n })\n }\n}\ncomponent.options.__file = \"src/views/bounced/analysisConfiguration.vue\"\nexport default component.exports"]}
|
||||
{"remainingRequest":"D:\\Hjm项目\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\Hjm项目\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue","dependencies":[{"path":"D:\\Hjm项目\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue","mtime":1672898828810},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["import { render, staticRenderFns } from \"./analysisConfiguration.vue?vue&type=template&id=fd3d0d46&scoped=true&\"\nimport script from \"./analysisConfiguration.vue?vue&type=script&lang=js&\"\nexport * from \"./analysisConfiguration.vue?vue&type=script&lang=js&\"\nimport style0 from \"./analysisConfiguration.vue?vue&type=style&index=0&id=fd3d0d46&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"fd3d0d46\",\n null\n \n)\n\n/* hot reload */\nif (module.hot) {\n var api = require(\"D:\\\\Hjm项目\\\\TransFlow\\\\node_modules\\\\vue-hot-reload-api\\\\dist\\\\index.js\")\n api.install(require('vue'))\n if (api.compatible) {\n module.hot.accept()\n if (!api.isRecorded('fd3d0d46')) {\n api.createRecord('fd3d0d46', component.options)\n } else {\n api.reload('fd3d0d46', component.options)\n }\n module.hot.accept(\"./analysisConfiguration.vue?vue&type=template&id=fd3d0d46&scoped=true&\", function () {\n api.rerender('fd3d0d46', {\n render: render,\n staticRenderFns: staticRenderFns\n })\n })\n }\n}\ncomponent.options.__file = \"src/views/bounced/analysisConfiguration.vue\"\nexport default component.exports"]}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -7,9 +7,16 @@
|
|||
<link rel="shortcut icon" href="TemplateData/favicon.ico">
|
||||
<link rel="stylesheet" href="TemplateData/style.css">
|
||||
</head>
|
||||
<style>
|
||||
body,html{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="unity-container" class="unity-desktop">
|
||||
<canvas id="unity-canvas" width=960 height=600></canvas>
|
||||
<div id="unity-container" style="height: 100%;" class="unity-desktop">
|
||||
<canvas id="unity-canvas" width=960 height="100%"></canvas>
|
||||
<div id="unity-loading-bar">
|
||||
<div id="unity-logo"></div>
|
||||
<div id="unity-progress-bar-empty">
|
||||
|
|
@ -17,7 +24,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="unity-warning"> </div>
|
||||
<div id="unity-footer">
|
||||
<div id="unity-footer" style="display: none;">
|
||||
<div id="unity-webgl-logo"></div>
|
||||
<div id="unity-fullscreen-button"></div>
|
||||
<div id="unity-build-title">Painter</div>
|
||||
|
|
@ -96,7 +103,7 @@
|
|||
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
|
||||
|
||||
canvas.style.width = "960px";
|
||||
canvas.style.height = "600px";
|
||||
canvas.style.height = "100%";
|
||||
}
|
||||
|
||||
loadingBar.style.display = "block";
|
||||
|
|
|
|||
|
|
@ -5,8 +5,7 @@
|
|||
<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
|
||||
>自动保存可以使系统在异常关闭后自动恢复。在这种情况下，缓存数据将会丢失，但所有存储数据将被保存。
|
||||
<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>
|
||||
|
|
@ -20,12 +19,12 @@
|
|||
</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>重置分析将删除所有累计的轨迹数据
|
||||
<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 坐标系中输入相机位置
|
||||
<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>
|
||||
|
|
@ -37,16 +36,25 @@
|
|||
|
||||
<div class="dataBoard">
|
||||
<div class="section">
|
||||
<div class="warning">
|
||||
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>通过将图像坐标系转换为物理坐标系，地理参考使您能够将像素测量转换为真实速度和距离。
|
||||
</div>
|
||||
<p class="board-title">坐标转换</p>
|
||||
|
||||
<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">
|
||||
|
|
@ -54,33 +62,42 @@
|
|||
<el-radio label="其他"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<div style="width: 100%; height: 300px">
|
||||
<iframe
|
||||
id="mapModuleTop"
|
||||
@load="load"
|
||||
src="./VideoWeb/index.html"
|
||||
frameborder="0"
|
||||
style="width: 100%; height: 100%"
|
||||
></iframe>
|
||||
<div style="width:100%;height:400px;margin-bottom: 10px;" v-if="coordinateForm.coordinateClose==true" >
|
||||
<iframe id="mapModuleTop" @load="load" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height: 100%" ></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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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>
|
||||
|
|
@ -106,7 +123,7 @@
|
|||
v-if="scope.$index !== 0"
|
||||
size="mini"
|
||||
type="text"
|
||||
style="color: #f56c6c"
|
||||
style="color: #F56C6C"
|
||||
@click="handleDelete(scope.row)"
|
||||
>{{ scope.row.isEdit ? 'Cancel' : 'Delete' }}
|
||||
</el-button>
|
||||
|
|
@ -114,124 +131,96 @@
|
|||
</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
|
||||
>
|
||||
<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>在视频/动图上设置进口出口道
|
||||
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>在视频/动图上设置进口出口道
|
||||
</div>
|
||||
<p class="board-title">车道识别配置</p>
|
||||
|
||||
<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> -->
|
||||
<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-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-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
|
||||
>您可以自定义进行视频分析的区域，区域之外的部分将被忽略。此功能可以帮助您检测和跟踪高分辨率视频特定部分的较小对象，实现检测器的数字变焦功能。
|
||||
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>您可以自定义进行视频分析的区域，区域之外的部分将被忽略。此功能可以帮助您检测和跟踪高分辨率视频特定部分的较小对象，实现检测器的数字变焦功能。
|
||||
</div>
|
||||
<p class="board-title">识别区域</p>
|
||||
|
||||
<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
|
||||
>
|
||||
<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">
|
||||
<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
|
||||
>为轨迹预测滤波算法定义细化轨迹的时间窗口。数值越小，延迟越小，适用于实时性要求高的场景；数值越大，轨迹的连续性越好，目标即使越过一些障碍也不容易丢失。
|
||||
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>为轨迹预测滤波算法定义细化轨迹的时间窗口。数值越小，延迟越小，适用于实时性要求高的场景；数值越大，轨迹的连续性越好，目标即使越过一些障碍也不容易丢失。
|
||||
</div>
|
||||
<p class="board-title">轨迹平滑</p>
|
||||
|
||||
<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 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-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
|
||||
>车牌识别开关。牌照信息表示与目标属性。（断面号牌，与断面设置关联）
|
||||
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>车牌识别开关。牌照信息表示与目标属性。（断面号牌，与断面设置关联）
|
||||
</div>
|
||||
<p class="board-title">车牌识别</p>
|
||||
|
||||
<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> -->
|
||||
<div style="width:100%;height:400px;margin-bottom: 10px;" v-if="licensePlateform.licensePlateClose==true">
|
||||
<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-column prop="sectionPlate" label="断面号牌" align="center">
|
||||
<template slot-scope="scope">
|
||||
|
|
@ -288,7 +277,7 @@
|
|||
v-if="scope.$index !== 0"
|
||||
size="mini"
|
||||
type="text"
|
||||
style="color: #f56c6c"
|
||||
style="color: #F56C6C"
|
||||
@click="handleDelete(scope.row)"
|
||||
>{{ scope.row.isEdit ? 'Cancel' : 'Delete' }}
|
||||
</el-button>
|
||||
|
|
@ -296,64 +285,51 @@
|
|||
</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
|
||||
>
|
||||
<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
|
||||
>更新频率：更新频率可以根据链路带宽进行设置。
|
||||
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>位移、速度、加速度的阈值，例如位移＜δ，速度＜v，加速度＜a，则判断车辆停车
|
||||
</div>
|
||||
<p class="board-title">停车状态</p>
|
||||
|
||||
<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-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-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-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-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>
|
||||
|
|
@ -362,22 +338,22 @@
|
|||
</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-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-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-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-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-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>
|
||||
|
|
@ -388,13 +364,15 @@
|
|||
<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协议
|
||||
import mqtt from "mqtt"; // mqtt协议
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -413,12 +391,14 @@ export default {
|
|||
region: ''
|
||||
},
|
||||
//最上部表单
|
||||
topForm: {},
|
||||
topForm:{
|
||||
|
||||
},
|
||||
//坐标转换
|
||||
coordinateForm:{
|
||||
coordinateClose:false,
|
||||
model:'Georeferencing',
|
||||
coordinateTransformation: '84坐标系'
|
||||
coordinateTransformation:'84坐标系',
|
||||
},
|
||||
coordinateTableData:[
|
||||
{
|
||||
|
|
@ -426,25 +406,23 @@ export default {
|
|||
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
|
||||
sectionDetector:false,
|
||||
},
|
||||
//识别区域
|
||||
identificationAreaform: {
|
||||
|
|
@ -457,7 +435,7 @@ export default {
|
|||
},
|
||||
// 车牌识别
|
||||
licensePlateform: {
|
||||
licensePlateClose: false
|
||||
licensePlateClose:false,
|
||||
},
|
||||
licensePlateTableData:[
|
||||
{
|
||||
|
|
@ -465,29 +443,28 @@ export default {
|
|||
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'
|
||||
acceleration:'2000',
|
||||
},
|
||||
//通信设置
|
||||
communicationform: {
|
||||
type: '快速-用于高带宽连接'
|
||||
type:'快速-用于高带宽连接',
|
||||
renewalFrequency:''
|
||||
},
|
||||
form: {
|
||||
name: '',
|
||||
|
|
@ -504,17 +481,15 @@ export default {
|
|||
name:'11',
|
||||
inPort:'111',
|
||||
inIp:'01'
|
||||
},
|
||||
{
|
||||
},{
|
||||
name:'22',
|
||||
inPort:'222',
|
||||
inIp:'02'
|
||||
},
|
||||
{
|
||||
},{
|
||||
name:'33',
|
||||
inPort:'333',
|
||||
inIp:'03'
|
||||
}
|
||||
},
|
||||
],
|
||||
internalIpList: [],
|
||||
fileList: []
|
||||
|
|
@ -534,21 +509,24 @@ export default {
|
|||
// this.load()
|
||||
// }, 5000);// 这样每次都会触发
|
||||
// }
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
load(){
|
||||
console.log('1111');
|
||||
var iframe = document.getElementById('mapModuleTop');
|
||||
console.log('iframe', iframe);
|
||||
console.log("1111")
|
||||
var iframe = document.getElementById("mapModuleTop");
|
||||
console.log("iframe",iframe)
|
||||
iframe.onload = () => {
|
||||
// setTimeout(() => {
|
||||
this.testMqtt();
|
||||
this.testMqtt()
|
||||
// }, 5000);
|
||||
};
|
||||
}
|
||||
},
|
||||
testMqtt() {
|
||||
console.log('222');
|
||||
this.getDataByMqtt();
|
||||
console.log("222")
|
||||
this.getDataByMqtt()
|
||||
|
||||
},
|
||||
handleChange(){},
|
||||
handleagain() {
|
||||
|
|
@ -622,7 +600,7 @@ export default {
|
|||
outPort: null,
|
||||
enabled: null,
|
||||
isEdit: true
|
||||
});
|
||||
})
|
||||
// }
|
||||
// })
|
||||
},
|
||||
|
|
@ -631,18 +609,18 @@ export default {
|
|||
for (let key in row) {
|
||||
// 判断一行字段是否输入完整
|
||||
if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {
|
||||
this.msgError('Please complete the information');
|
||||
return;
|
||||
this.msgError('Please complete the information')
|
||||
return
|
||||
}
|
||||
}
|
||||
const params = {
|
||||
name: row.name,
|
||||
inIp: row.inIp
|
||||
inIp: row.inIp,
|
||||
// inPort: parseInt(row.inPort),
|
||||
// outPort: parseInt(row.outPort),
|
||||
// enabled: row.enabled
|
||||
};
|
||||
this.getReverseShellList();
|
||||
}
|
||||
this.getReverseShellList()
|
||||
// addShell(params).then(res => {
|
||||
// if (res.code === 200) {
|
||||
// this.msgSuccess('Add reverse shell successfully')
|
||||
|
|
@ -657,8 +635,8 @@ export default {
|
|||
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;
|
||||
this.msgError('Please complete the information')
|
||||
return
|
||||
}
|
||||
}
|
||||
const params = {
|
||||
|
|
@ -667,7 +645,7 @@ export default {
|
|||
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')
|
||||
|
|
@ -676,30 +654,29 @@ export default {
|
|||
// })
|
||||
} else {
|
||||
// 点击编辑时
|
||||
row.isEdit = true;
|
||||
row.isEdit = true
|
||||
}
|
||||
},
|
||||
// 删除或取消按钮
|
||||
handleDelete(row) {
|
||||
// 点击取消时
|
||||
if (row.isEdit) {
|
||||
this.getReverseShellList();
|
||||
this.getReverseShellList()
|
||||
} else {
|
||||
// 点击删除时
|
||||
this.$confirm('Are you sure to delete reverse shell?', 'warning', {
|
||||
confirmButtonText: 'Sure',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
}).then(() => {
|
||||
// deleteShell(row.name).then(res => {
|
||||
// if (res.code === 200) {
|
||||
// this.msgSuccess('Delete reverse shell successfully')
|
||||
// this.getReverseShellList()
|
||||
// }
|
||||
// })
|
||||
}).catch(() => {
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
},
|
||||
// mqtt订阅（独立）
|
||||
|
|
@ -708,7 +685,7 @@ export default {
|
|||
// 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 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/';
|
||||
|
||||
|
|
@ -722,18 +699,18 @@ export default {
|
|||
username: 'admin', // 用户名（可选）
|
||||
password: '123456', // 密码（可选）
|
||||
clientId: clientId, // 客户端ID，默认随机生成
|
||||
protocolId: 'MQTT',
|
||||
protocolId: "MQTT",
|
||||
protocolVersion: 4,
|
||||
clean: true, // false在离线时接收QoS1和2的消息
|
||||
reconnectPeriod: 2000, // 重连间隔，默认1000毫秒
|
||||
connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
|
||||
will: {
|
||||
// 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）
|
||||
topic: 'img1', // 要发布的主题
|
||||
payload: '[MQTT-TEST] 遗嘱消息：连接异常断开！', // 要发布的消息
|
||||
topic: "img1", // 要发布的主题
|
||||
payload: "[MQTT-TEST] 遗嘱消息：连接异常断开！", // 要发布的消息
|
||||
qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
|
||||
retain: false // 保留标志
|
||||
}
|
||||
retain: false, // 保留标志
|
||||
},
|
||||
};
|
||||
if (this.mqttClient == undefined) {
|
||||
this.mqttClient = mqtt.connect(host, options); // 连接
|
||||
|
|
@ -741,16 +718,16 @@ export default {
|
|||
// const client = mqtt.connect(host) // 连接
|
||||
// 错误回调
|
||||
// console.log("this.mqttClient", this.mqttClient)
|
||||
this.mqttClient.on('error', (err) => {
|
||||
console.log('[MQTT-TEST] 连接错误：', err);
|
||||
this.mqttClient.on("error", (err) => {
|
||||
console.log("[MQTT-TEST] 连接错误：", err);
|
||||
this.mqttClient.end();
|
||||
});
|
||||
// 重连回调
|
||||
this.mqttClient.on('reconnect', (reconnect) => {
|
||||
this.mqttClient.on("reconnect", (reconnect) => {
|
||||
// console.log("[MQTT-TEST] 重连中……", reconnect);
|
||||
});
|
||||
// 连接回调
|
||||
this.mqttClient.on('connect', (connect) => {
|
||||
this.mqttClient.on("connect", (connect) => {
|
||||
// console.log("[MQTT-TEST] 已连接的客户端ID: ", connect);
|
||||
// 订阅
|
||||
this.mqttClient.subscribe('img0', { qos: 0 });
|
||||
|
|
@ -765,15 +742,17 @@ export default {
|
|||
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) {
|
||||
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的错误提示数据
|
||||
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)
|
||||
|
|
@ -794,127 +773,131 @@ export default {
|
|||
// const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||||
// // console.log("imageUrl", imageUrl)
|
||||
// }
|
||||
} else if (topic.indexOf('img1') != -1) {
|
||||
} 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数据
|
||||
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);
|
||||
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);
|
||||
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) {
|
||||
} 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数据
|
||||
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);
|
||||
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);
|
||||
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) {
|
||||
} 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数据
|
||||
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);
|
||||
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);
|
||||
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) {
|
||||
} 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数据
|
||||
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);
|
||||
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);
|
||||
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) {
|
||||
} 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数据
|
||||
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);
|
||||
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);
|
||||
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) {
|
||||
} else if (topic.indexOf("stream0") != -1) {
|
||||
// console.log(
|
||||
// `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||||
// new Date(),
|
||||
// new Date().getMilliseconds()
|
||||
// );
|
||||
} else if (topic.indexOf('stream0') != -1) {
|
||||
} else if (topic.indexOf("stream0") != -1) {
|
||||
// console.log(
|
||||
// `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||||
// new Date(),
|
||||
// new Date().getMilliseconds()
|
||||
// );
|
||||
} else if (topic.indexOf('stream1') != -1) {
|
||||
} else if (topic.indexOf("stream1") != -1) {
|
||||
console.log(
|
||||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||||
new Date(),
|
||||
new Date().getMilliseconds()
|
||||
);
|
||||
} else if (topic.indexOf('stream2') != -1) {
|
||||
} else if (topic.indexOf("stream2") != -1) {
|
||||
console.log(
|
||||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||||
new Date(),
|
||||
new Date().getMilliseconds()
|
||||
);
|
||||
} else if (topic.indexOf('stream3') != -1) {
|
||||
} else if (topic.indexOf("stream3") != -1) {
|
||||
console.log(
|
||||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||||
new Date(),
|
||||
new Date().getMilliseconds()
|
||||
);
|
||||
} else if (topic.indexOf('stream4') != -1) {
|
||||
} else if (topic.indexOf("stream4") != -1) {
|
||||
console.log(
|
||||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||||
new Date(),
|
||||
new Date().getMilliseconds()
|
||||
);
|
||||
} else if (topic.indexOf('stream5') != -1) {
|
||||
} else if (topic.indexOf("stream5") != -1) {
|
||||
console.log(
|
||||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||||
new Date(),
|
||||
new Date().getMilliseconds()
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -944,7 +927,7 @@ export default {
|
|||
.dataBoard .section {
|
||||
width: 80%;
|
||||
// border: 1px solid gray;
|
||||
border: 1px solid #e4e7ed;
|
||||
border: 1px solid #E4E7ED;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
margin-bottom: 3%;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="xx路口">
|
||||
<div style="width:75%;height:900px;display:inline-block;border:1px soild #eee;">
|
||||
<iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height:100%;"></iframe>
|
||||
<iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height:600px;"></iframe>
|
||||
<!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none"
|
||||
ref="iframe"></iframe> -->
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue