chengdandan
/
TransFlow
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
何嘉峣 2023-01-09 08:58:43 +08:00
parent 0f16142fb4
commit dfa9a739f4
13 changed files with 883 additions and 841 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
node_modules/.cache/babel-loader/34c81c881eecd4dea881c21a8550f1ee.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/babel-loader/bc81df238bb3d88b2525f7e47a7080b5.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/vue-loader/34d7a259c73e5146a46309c95de698fe.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/vue-loader/5899061febcbbb9ca01f7fd4f9149c61.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/vue-loader/dee8962c9878db4c9a1761ba565dbd10.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/vue-loader/e5293dc902721280cafc4f0a48eebeb5.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/vue-loader/ec091d9518e2a9260b00de4e3477abcb.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/vue-loader/ec753effee2bb1d89bb282f03e66a8a1.json generated vendored
View File

@ -1 +1 @@
{"remainingRequest":"D:\\Hjm项目\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\Hjm项目\\TransFlow\\src\\views\\index.vue","dependencies":[{"path":"D:\\Hjm项目\\TransFlow\\src\\views\\index.vue","mtime":1672881699163},{"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 \"./index.vue?vue&type=template&id=a83bd3b0&scoped=true&\"\nimport script from \"./index.vue?vue&type=script&lang=js&\"\nexport * from \"./index.vue?vue&type=script&lang=js&\"\nimport style0 from \"./index.vue?vue&type=style&index=0&id=a83bd3b0&scoped=true&lang=css&\"\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 \"a83bd3b0\",\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('a83bd3b0')) {\n api.createRecord('a83bd3b0', component.options)\n } else {\n api.reload('a83bd3b0', component.options)\n }\n module.hot.accept(\"./index.vue?vue&type=template&id=a83bd3b0&scoped=true&\", function () {\n api.rerender('a83bd3b0', {\n render: render,\n staticRenderFns: staticRenderFns\n })\n })\n }\n}\ncomponent.options.__file = \"src/views/index.vue\"\nexport default component.exports"]} {"remainingRequest":"D:\\Hjm项目\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\Hjm项目\\TransFlow\\src\\views\\index.vue","dependencies":[{"path":"D:\\Hjm项目\\TransFlow\\src\\views\\index.vue","mtime":1672899125488},{"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 \"./index.vue?vue&type=template&id=a83bd3b0&scoped=true&\"\nimport script from \"./index.vue?vue&type=script&lang=js&\"\nexport * from \"./index.vue?vue&type=script&lang=js&\"\nimport style0 from \"./index.vue?vue&type=style&index=0&id=a83bd3b0&scoped=true&lang=css&\"\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 \"a83bd3b0\",\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('a83bd3b0')) {\n api.createRecord('a83bd3b0', component.options)\n } else {\n api.reload('a83bd3b0', component.options)\n }\n module.hot.accept(\"./index.vue?vue&type=template&id=a83bd3b0&scoped=true&\", function () {\n api.rerender('a83bd3b0', {\n render: render,\n staticRenderFns: staticRenderFns\n })\n })\n }\n}\ncomponent.options.__file = \"src/views/index.vue\"\nexport default component.exports"]}

2
node_modules/.cache/vue-loader/f4f9451df195091e4c28df541f9bece8.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/vue-loader/f9f94b44b4db2e1b803eba3d37f071dd.json generated vendored
View File

@ -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":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"]} {"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":1672989638691},{"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"]}

2
node_modules/.cache/vue-loader/fb2a9b985aabf8535ff210c62cea0040.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/vue-loader/ff8739126d9dd8e712f31bae28752ad3.json generated vendored
View File

File diff suppressed because one or more lines are too long

520
src/views/bounced/analysisConfiguration.vue
View File

@ -1,11 +1,12 @@
<template> <template>
<div > <div class="analysis">
<div > <div class="top" style="margin-top:10px">
<div class="top">
<div class="section"> <div class="section">
<el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="140px"> <el-form :inline="true" v-if="false" :model="formInline" class="demo-form-inline" label-width="fit-content">
<div class="warning"> <div class="warning">
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>自动保存可以使系统在异常关闭后自动恢复。在这种情况下，缓存数据将会丢失，但所有存储数据将被保存。 <p class="board-title">自动保存</p>
<i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
>自动保存可以使系统在异常关闭后自动恢复。在这种情况下，缓存数据将会丢失，但所有存储数据将被保存。
</div> </div>
<el-form-item label="自动保存："> <el-form-item label="自动保存：">
<el-switch v-model="formInline.user"></el-switch> <el-switch v-model="formInline.user"></el-switch>
@ -17,14 +18,16 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-form ref="form" :model="sizeForm" label-width="140px"> <el-form ref="form" :model="sizeForm" label-width="fit-content" style="margin-top:15px">
<div class="warning"> <div class="warning" v-if="false">
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>重置分析将删除所有累计的轨迹数据 <p class="board-title">重置分析</p>
<i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i>重置分析将删除所有累计的轨迹数据
</div> </div>
<!-- <el-form-item > --> <!-- <el-form-item > -->
<el-button type="primary" @click="handleagain()" size="small" style="width:150px">重置</el-button> <el-button v-if="false" type="primary" @click="handleagain()" size="small" style="width: 150px">重置</el-button>
<div class="warning"> <div class="warning" style="margin-top:15px">
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>在 WGS84 坐标系中输入相机位置 <p class="board-title">相机位置</p>
<i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i>在 WGS84 坐标系中输入相机位置
</div> </div>
<el-form-item label="相机位置："> <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" placeholder="经度"></el-input>
@ -33,27 +36,26 @@
</el-form> </el-form>
</div> </div>
</div> </div>
<div class="dataBoard"> <div class="dataBoard">
<div class="section"> <div class="section">
<div class="warning"> <div class="warning">
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>通过将图像坐标系转换为物理坐标系，地理参考使您能够将像素测量转换为真实速度和距离。
</div>
<p class="board-title">坐标转换</p> <p class="board-title">坐标转换</p>
<i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
<el-form ref="form" :model="coordinateForm" label-width="140px"> >通过将图像坐标系转换为物理坐标系，地理参考使您能够将像素测量转换为真实速度和距离。
</div>
<el-form ref="form" :model="coordinateForm" label-width="fit-content">
<el-form-item label="坐标转换开关："> <el-form-item label="坐标转换开关：">
<el-switch v-model="coordinateForm.coordinateClose"></el-switch> <el-switch v-model="coordinateForm.coordinateClose"></el-switch>
</el-form-item> </el-form-item>
<el-form-item label="模型：" v-if="coordinateForm.coordinateClose == true"> <el-form-item label="模型：" v-if="coordinateForm.coordinateClose == true">
<el-radio-group v-model="coordinateForm.model"> <el-radio-group v-model="coordinateForm.model">
<el-radio label="Georeferencing"></el-radio> <el-radio label="Georeferencing"></el-radio>
<el-radio label="其他"></el-radio> <el-radio label="其他"></el-radio>
</el-radio-group> </el-radio-group>
<div class="warning"> <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> </div>
</el-form-item> </el-form-item>
<el-form-item label="坐标转换：" v-if="coordinateForm.coordinateClose == true"> <el-form-item label="坐标转换：" v-if="coordinateForm.coordinateClose == true">
@ -62,42 +64,33 @@
<el-radio label="其他"></el-radio> <el-radio label="其他"></el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<div style="width:100%;height:400px;margin-bottom: 10px;" v-if="coordinateForm.coordinateClose==true" > <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
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" <!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none"
ref="iframe"></iframe> --> ref="iframe"></iframe> -->
</div> </div>
<el-table border :data="coordinateTableData" v-if="coordinateForm.coordinateClose == true"> <el-table border :data="coordinateTableData" v-if="coordinateForm.coordinateClose == true">
<el-table-column prop="name" label="点名称" align="center"> <el-table-column prop="name" label="点名称" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input <el-input v-if="scope.$index === 0" v-model="scope.row.name" maxlength="30" placeholder="Required" />
v-if="scope.$index === 0"
v-model="scope.row.name"
maxlength="30"
placeholder="Required"
/>
<span v-else v-text="scope.row.name"></span> <span v-else v-text="scope.row.name"></span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="longitude" label="经度" align="center"> <el-table-column prop="longitude" label="经度" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input <el-input v-if="scope.row.isEdit" v-model="scope.row.longitude" maxlength="20" placeholder="Required" />
v-if="scope.row.isEdit"
v-model="scope.row.longitude"
maxlength="20"
placeholder="Required"
/>
<span v-else v-text="scope.row.longitude"></span> <span v-else v-text="scope.row.longitude"></span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="latitude" label="纬度" align="center"> <el-table-column prop="latitude" label="纬度" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input <el-input v-if="scope.row.isEdit" v-model="scope.row.latitude" maxlength="20" placeholder="Required" />
v-if="scope.row.isEdit"
v-model="scope.row.latitude"
maxlength="20"
placeholder="Required"
/>
<span v-else v-text="scope.row.latitude"></span> <span v-else v-text="scope.row.latitude"></span>
</template> </template>
</el-table-column> </el-table-column>
@ -123,7 +116,7 @@
v-if="scope.$index !== 0" v-if="scope.$index !== 0"
size="mini" size="mini"
type="text" type="text"
style="color: #F56C6C" style="color: #f56c6c"
@click="handleDelete(scope.row)" @click="handleDelete(scope.row)"
>{{ scope.row.isEdit ? 'Cancel' : 'Delete' }} >{{ scope.row.isEdit ? 'Cancel' : 'Delete' }}
</el-button> </el-button>
@ -131,20 +124,24 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<div style="margin-top: 15px"> <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> </div>
</el-form> </el-form>
</div> </div>
</div> </div>
<div class="dataBoard"> <div class="dataBoard" v-if="false">
<div class="section"> <div class="section">
<div class="warning"> <div class="warning">
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>在视频/动图上设置进口出口道
</div>
<p class="board-title">车道识别配置</p> <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"> <el-form ref="form" :model="laneform" label-width="350px">
<!-- <p>车道识别配置</p> --> <!-- <p>车道识别配置</p> -->
<el-form-item label="车道识别配置开关：" label-width="150px"> <el-form-item label="车道识别配置开关：" label-width="150px">
@ -156,69 +153,95 @@
<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.areaDetector"></el-switch> <el-switch v-model="laneform.areaDetector"></el-switch>
</el-form-item> </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-switch v-model="laneform.sectionDetector"></el-switch>
</el-form-item> </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> </el-form>
</div> </div>
</div> </div>
<div class="dataBoard"> <div class="dataBoard">
<div class="section"> <div class="section">
<div class="warning"> <div class="warning">
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>您可以自定义进行视频分析的区域，区域之外的部分将被忽略。此功能可以帮助您检测和跟踪高分辨率视频特定部分的较小对象，实现检测器的数字变焦功能。
</div>
<p class="board-title">识别区域</p> <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="140px">
<el-form ref="form" :model="identificationAreaform" label-width="fit-content">
<!-- <p>车道识别配置</p> --> <!-- <p>车道识别配置</p> -->
<el-form-item label="识别区域开关" style="width:250px"> <el-form-item label="识别区域开关：" style="width: 250px">
<el-switch v-model="identificationAreaform.identificationAreaClose"></el-switch> <el-switch v-model="identificationAreaform.identificationAreaClose"></el-switch>
</el-form-item> </el-form-item>
<div style="width: 100%; height: 400px" v-if="identificationAreaform.identificationAreaClose == true"> <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> <iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height: 100%"></iframe>
</div> </div>
<el-button type="primary" @click="handleagain()" size="small" style="width:150px" v-if="identificationAreaform.identificationAreaClose==true">保存</el-button> <el-button
type="primary"
@click="handleagain()"
size="small"
style="width: 150px"
v-if="identificationAreaform.identificationAreaClose == true"
>保存</el-button
>
</el-form> </el-form>
</div> </div>
</div> </div>
<div class="dataBoard"> <div class="dataBoard">
<div class="section"> <div class="section">
<div class="warning"> <div class="warning">
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>为轨迹预测滤波算法定义细化轨迹的时间窗口。数值越小，延迟越小，适用于实时性要求高的场景；数值越大，轨迹的连续性越好，目标即使越过一些障碍也不容易丢失。
</div>
<p class="board-title">轨迹平滑</p> <p class="board-title">轨迹平滑</p>
<i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
<el-form ref="form" :model="trajectorySmoothingform" label-width="140px"> >为轨迹预测滤波算法定义细化轨迹的时间窗口。数值越小，延迟越小，适用于实时性要求高的场景；数值越大，轨迹的连续性越好，目标即使越过一些障碍也不容易丢失。
<el-form-item label="轨迹平滑开关" style="width:250px"> </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-switch v-model="trajectorySmoothingform.trajectorySmoothingClose"></el-switch>
</el-form-item> </el-form-item>
<el-form-item label="预测滤波时间" style="width:250px" v-if="trajectorySmoothingform.trajectorySmoothingClose==true"> <el-form-item
<el-input-number v-model="trajectorySmoothingform.time" @change="handleChange" :min="2000" :max="3000" label="预测滤波时间"></el-input-number> 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-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> </el-form>
</div> </div>
</div> </div>
<div class="dataBoard"> <div class="dataBoard">
<div class="section"> <div class="section">
<div class="warning"> <div class="warning">
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>车牌识别开关。牌照信息表示与目标属性。（断面号牌，与断面设置关联）
</div>
<p class="board-title">车牌识别</p> <p class="board-title">车牌识别</p>
<i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
<el-form ref="form" :model="licensePlateform" label-width="140px"> >车牌识别开关。牌照信息表示与目标属性。（断面号牌，与断面设置关联）
<el-form-item label="车牌识别开关" style="width:250px"> </div>
<el-form ref="form" :model="licensePlateform" label-width="fit-content">
<el-form-item label="车牌识别开关：">
<el-switch v-model="licensePlateform.licensePlateClose"></el-switch> <el-switch v-model="licensePlateform.licensePlateClose"></el-switch>
</el-form-item> </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="licensePlateform.licensePlateClose == true">
<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: 100%"></iframe>
</div> </div>
<el-table border :data="licensePlateTableData" v-if="licensePlateform.licensePlateClose == true"> <el-table border :data="licensePlateTableData" v-if="licensePlateform.licensePlateClose == true">
@ -233,7 +256,7 @@
<span v-else v-text="scope.row.sectionPlate"></span> <span v-else v-text="scope.row.sectionPlate"></span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="setAssociation" label="断面设置关联" align="center"> <el-table-column prop="setAssociation" label="断面设置关联：" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input <el-input
v-if="scope.row.isEdit" v-if="scope.row.isEdit"
@ -244,7 +267,7 @@
<span v-else v-text="scope.row.setAssociation"></span> <span v-else v-text="scope.row.setAssociation"></span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="thresholdValue" label="车牌匹配阈值" align="center"> <el-table-column prop="thresholdValue" label="车牌匹配阈值：" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input <el-input
v-if="scope.row.isEdit" v-if="scope.row.isEdit"
@ -255,7 +278,7 @@
<span v-else v-text="scope.row.thresholdValue"></span> <span v-else v-text="scope.row.thresholdValue"></span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column label="操作：" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
v-if="scope.$index === 0" v-if="scope.$index === 0"
@ -277,7 +300,7 @@
v-if="scope.$index !== 0" v-if="scope.$index !== 0"
size="mini" size="mini"
type="text" type="text"
style="color: #F56C6C" style="color: #f56c6c"
@click="handleDelete(scope.row)" @click="handleDelete(scope.row)"
>{{ scope.row.isEdit ? 'Cancel' : 'Delete' }} >{{ scope.row.isEdit ? 'Cancel' : 'Delete' }}
</el-button> </el-button>
@ -285,51 +308,71 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<div style="margin-top: 15px"> <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> </div>
</el-form> </el-form>
</div> </div>
</div> </div>
<div class="dataBoard"> <div class="dataBoard">
<div class="section"> <div class="section">
<div class="warning"> <div class="warning">
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>位移、速度、加速度的阈值，例如位移＜δ，速度＜v，加速度＜a，则判断车辆停车
</div>
<p class="board-title">停车状态</p> <p class="board-title">停车状态</p>
<i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i
<el-form :inline="true" :model="stopStateform" class="demo-form-inline" label-width="140px"> >位移、速度、加速度的阈值，例如位移＜δ，速度＜v，加速度＜a，则判断车辆停车
<el-form-item label="位移：" > </div>
<el-input-number v-model="stopStateform.displacement" @change="handleChange" :min="2000" :max="3000" label="位移"></el-input-number> <el-form :inline="true" :model="stopStateform" class="demo-form-inline" label-width="fit-content">
<el-form-item label="位移：" style="margin-right:10px">
<el-input-number
v-model="stopStateform.displacement"
@change="handleChange"
:min="2000"
:max="3000"
label="位移"
></el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="速度：" > <el-form-item label="速度：" style="margin-right:10px">
<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>
<el-form-item label="加速度："> <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-item>
</el-form> </el-form>
<div style="margin-top: 15px"> <div style="margin-top: 15px">
<el-button type="primary" @click="handleagain()" size="small" style="width: 150px">保存</el-button> <el-button type="primary" @click="handleagain()" size="small" style="width: 150px">保存</el-button>
</div> </div>
</div> </div>
</div> </div>
<div class="dataBoard"> <div class="dataBoard">
<div class="section"> <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"> <div class="warning">
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>更新频率可以根据链路带宽进行设置。 <p class="board-title">通信设置</p>
<i class="el-icon-warning" style="color: #409eff; margin: 0 3px 0 10px"></i>更新频率可以根据链路带宽进行设置。
</div> </div>
<el-form-item label="类型：" style="margin-bottom: 20px;"> <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-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>
@ -338,22 +381,22 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="请求轻型有效载荷：" v-if="communicationform.type == '自定义'"> <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>
<el-form-item label="请求重型有效载荷：" v-if="communicationform.type == '自定义'"> <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>
<el-form-item label="FPS分配器：" v-if="communicationform.type == '自定义'"> <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>
<el-form-item label="框架决议：" v-if="communicationform.type == '自定义'"> <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="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option> <el-option label="区域二" value="beijing"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="压缩格式：" v-if="communicationform.type == '自定义'"> <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="JPG" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option> <el-option label="区域二" value="beijing"></el-option>
</el-select> </el-select>
@ -364,15 +407,12 @@
<el-button type="primary" @click="handleagain()" size="small" style="width: 150px">保存</el-button> <el-button type="primary" @click="handleagain()" size="small" style="width: 150px">保存</el-button>
</el-form> </el-form>
</div> </div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import mqtt from "mqtt"; // mqtt协议 import mqtt from 'mqtt'; // mqtt协议
export default { export default {
data() { data() {
return { return {
@ -391,14 +431,12 @@ export default {
region: '' region: ''
}, },
//最上部表单 //最上部表单
topForm:{ topForm: {},
},
//坐标转换 //坐标转换
coordinateForm: { coordinateForm: {
coordinateClose: false, coordinateClose: false,
model: 'Georeferencing', model: 'Georeferencing',
coordinateTransformation:'84坐标系', coordinateTransformation: '84坐标系'
}, },
coordinateTableData: [ coordinateTableData: [
{ {
@ -406,23 +444,25 @@ export default {
longitude: '111', longitude: '111',
inIp: '01', inIp: '01',
latitude: '' latitude: ''
},{ },
{
name: '22', name: '22',
longitude: '222', longitude: '222',
inIp: '02', inIp: '02',
latitude: '' latitude: ''
},{ },
{
name: '33', name: '33',
longitude: '333', longitude: '333',
inIp: '03', inIp: '03',
latitude: '' latitude: ''
}, }
], ],
//车道识别配置 //车道识别配置
laneform: { laneform: {
laneClose: false, laneClose: false,
areaDetector: false, areaDetector: false,
sectionDetector:false, sectionDetector: false
}, },
//识别区域 //识别区域
identificationAreaform: { identificationAreaform: {
@ -435,7 +475,7 @@ export default {
}, },
// 车牌识别 // 车牌识别
licensePlateform: { licensePlateform: {
licensePlateClose:false, licensePlateClose: false
}, },
licensePlateTableData: [ licensePlateTableData: [
{ {
@ -443,23 +483,25 @@ export default {
sectionPlate: '111', sectionPlate: '111',
inIp: '01', inIp: '01',
setAssociation: '' setAssociation: ''
},{ },
{
thresholdValue: '22', thresholdValue: '22',
sectionPlate: '222', sectionPlate: '222',
inIp: '02', inIp: '02',
setAssociation: '' setAssociation: ''
},{ },
{
thresholdValue: '33', thresholdValue: '33',
sectionPlate: '333', sectionPlate: '333',
inIp: '03', inIp: '03',
setAssociation: '' setAssociation: ''
}, }
], ],
//停车状态 //停车状态
stopStateform: { stopStateform: {
displacement: '2000', displacement: '2000',
speed: '2000', speed: '2000',
acceleration:'2000', acceleration: '2000'
}, },
//通信设置 //通信设置
communicationform: { communicationform: {
@ -481,15 +523,17 @@ export default {
name: '11', name: '11',
inPort: '111', inPort: '111',
inIp: '01' inIp: '01'
},{ },
{
name: '22', name: '22',
inPort: '222', inPort: '222',
inIp: '02' inIp: '02'
},{ },
{
name: '33', name: '33',
inPort: '333', inPort: '333',
inIp: '03' inIp: '03'
}, }
], ],
internalIpList: [], internalIpList: [],
fileList: [] fileList: []
@ -509,24 +553,21 @@ export default {
// this.load() // this.load()
// }, 5000);// 这样每次都会触发 // }, 5000);// 这样每次都会触发
// } // }
}, },
methods: { methods: {
load() { load() {
console.log("1111") console.log('1111');
var iframe = document.getElementById("mapModuleTop"); var iframe = document.getElementById('mapModuleTop');
console.log("iframe",iframe) console.log('iframe', iframe);
iframe.onload = () => { iframe.onload = () => {
// setTimeout(() => { // setTimeout(() => {
this.testMqtt() this.testMqtt();
// }, 5000); // }, 5000);
} };
}, },
testMqtt() { testMqtt() {
console.log("222") console.log('222');
this.getDataByMqtt() this.getDataByMqtt();
}, },
handleChange() {}, handleChange() {},
handleagain() { handleagain() {
@ -600,7 +641,7 @@ export default {
outPort: null, outPort: null,
enabled: null, enabled: null,
isEdit: true isEdit: true
}) });
// } // }
// }) // })
}, },
@ -609,18 +650,18 @@ export default {
for (let key in row) { for (let key in row) {
// 判断一行字段是否输入完整 // 判断一行字段是否输入完整
if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') { if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {
this.msgError('Please complete the information') this.msgError('Please complete the information');
return return;
} }
} }
const params = { const params = {
name: row.name, name: row.name,
inIp: row.inIp, inIp: row.inIp
// inPort: parseInt(row.inPort), // inPort: parseInt(row.inPort),
// outPort: parseInt(row.outPort), // outPort: parseInt(row.outPort),
// enabled: row.enabled // enabled: row.enabled
} };
this.getReverseShellList() this.getReverseShellList();
// addShell(params).then(res => { // addShell(params).then(res => {
// if (res.code === 200) { // if (res.code === 200) {
// this.msgSuccess('Add reverse shell successfully') // this.msgSuccess('Add reverse shell successfully')
@ -635,8 +676,8 @@ export default {
if (row.isEdit) { if (row.isEdit) {
for (let key in row) { for (let key in row) {
if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') { if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {
this.msgError('Please complete the information') this.msgError('Please complete the information');
return return;
} }
} }
const params = { const params = {
@ -645,7 +686,7 @@ export default {
inPort: parseInt(row.inPort), inPort: parseInt(row.inPort),
outPort: parseInt(row.outPort), outPort: parseInt(row.outPort),
enabled: row.enabled enabled: row.enabled
} };
// updateShell(params).then(res => { // updateShell(params).then(res => {
// if (res.code === 200) { // if (res.code === 200) {
// this.msgSuccess('Update reverse shell successfully') // this.msgSuccess('Update reverse shell successfully')
@ -654,29 +695,30 @@ export default {
// }) // })
} else { } else {
// 点击编辑时 // 点击编辑时
row.isEdit = true row.isEdit = true;
} }
}, },
// 删除或取消按钮 // 删除或取消按钮
handleDelete(row) { handleDelete(row) {
// 点击取消时 // 点击取消时
if (row.isEdit) { if (row.isEdit) {
this.getReverseShellList() this.getReverseShellList();
} else { } else {
// 点击删除时 // 点击删除时
this.$confirm('Are you sure to delete reverse shell?', 'warning', { this.$confirm('Are you sure to delete reverse shell?', 'warning', {
confirmButtonText: 'Sure', confirmButtonText: 'Sure',
cancelButtonText: 'Cancel', cancelButtonText: 'Cancel',
type: 'warning' type: 'warning'
}).then(() => { })
.then(() => {
// deleteShell(row.name).then(res => { // deleteShell(row.name).then(res => {
// if (res.code === 200) { // if (res.code === 200) {
// this.msgSuccess('Delete reverse shell successfully') // this.msgSuccess('Delete reverse shell successfully')
// this.getReverseShellList() // this.getReverseShellList()
// } // }
// }) // })
}).catch(() => {
}) })
.catch(() => {});
} }
}, },
// mqtt订阅（独立） // mqtt订阅（独立）
@ -685,7 +727,7 @@ export default {
// that.$refs.iframe.contentWindow.getDestination(1) // that.$refs.iframe.contentWindow.getDestination(1)
// console.log("1111",document.getElementById("mapModule")) // console.log("1111",document.getElementById("mapModule"))
// document.getElementById("mapModule").contentWindow.getDestination(1) // 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://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
const host = 'ws://172.16.1.168:10087/'; const host = 'ws://172.16.1.168:10087/';
@ -699,18 +741,18 @@ export default {
username: 'admin', // 用户名（可选） username: 'admin', // 用户名（可选）
password: '123456', // 密码（可选） password: '123456', // 密码（可选）
clientId: clientId, // 客户端ID，默认随机生成 clientId: clientId, // 客户端ID，默认随机生成
protocolId: "MQTT", protocolId: 'MQTT',
protocolVersion: 4, protocolVersion: 4,
clean: true, // false在离线时接收QoS1和2的消息 clean: true, // false在离线时接收QoS1和2的消息
reconnectPeriod: 2000, // 重连间隔，默认1000毫秒 reconnectPeriod: 2000, // 重连间隔，默认1000毫秒
connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间 connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
will: { will: {
// 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息） // 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）
topic: "img1", // 要发布的主题 topic: 'img1', // 要发布的主题
payload: "[MQTT-TEST] 遗嘱消息：连接异常断开！", // 要发布的消息 payload: '[MQTT-TEST] 遗嘱消息：连接异常断开！', // 要发布的消息
qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次 qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
retain: false, // 保留标志 retain: false // 保留标志
}, }
}; };
if (this.mqttClient == undefined) { if (this.mqttClient == undefined) {
this.mqttClient = mqtt.connect(host, options); // 连接 this.mqttClient = mqtt.connect(host, options); // 连接
@ -718,16 +760,16 @@ export default {
// const client = mqtt.connect(host) // 连接 // const client = mqtt.connect(host) // 连接
// 错误回调 // 错误回调
// console.log("this.mqttClient", this.mqttClient) // console.log("this.mqttClient", this.mqttClient)
this.mqttClient.on("error", (err) => { this.mqttClient.on('error', (err) => {
console.log("[MQTT-TEST] 连接错误：", err); console.log('[MQTT-TEST] 连接错误：', err);
this.mqttClient.end(); this.mqttClient.end();
}); });
// 重连回调 // 重连回调
this.mqttClient.on("reconnect", (reconnect) => { this.mqttClient.on('reconnect', (reconnect) => {
// console.log("[MQTT-TEST] 重连中……", reconnect); // console.log("[MQTT-TEST] 重连中……", reconnect);
}); });
// 连接回调 // 连接回调
this.mqttClient.on("connect", (connect) => { this.mqttClient.on('connect', (connect) => {
// console.log("[MQTT-TEST] 已连接的客户端ID: ", connect); // console.log("[MQTT-TEST] 已连接的客户端ID: ", connect);
// 订阅 // 订阅
this.mqttClient.subscribe('img0', { qos: 0 }); this.mqttClient.subscribe('img0', { qos: 0 });
@ -742,17 +784,15 @@ export default {
this.mqttClient.subscribe('stream3', { qos: 0 }); this.mqttClient.subscribe('stream3', { qos: 0 });
this.mqttClient.subscribe('stream4', { qos: 0 }); this.mqttClient.subscribe('stream4', { qos: 0 });
this.mqttClient.subscribe('stream5', { qos: 0 }); this.mqttClient.subscribe('stream5', { qos: 0 });
}); });
// 接收回调 // 接收回调
this.mqttClient.on("message", (topic, message, packet) => { this.mqttClient.on('message', (topic, message, packet) => {
if (topic.indexOf('img0') != -1) {
if (topic.indexOf("img0") != -1) {
// try { // try {
const utf8decoder = new TextDecoder() const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message) const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
// debugger // debugger
// console.log("msg", msg) //msg为转换后的JSON数据 // console.log("msg", msg) //msg为转换后的JSON数据
// console.log("msg.pic", msg.pic) // console.log("msg.pic", msg.pic)
@ -773,131 +813,127 @@ export default {
// const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) // const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
// // console.log("imageUrl", imageUrl) // // console.log("imageUrl", imageUrl)
// } // }
} else if (topic.indexOf("img1") != -1) { } else if (topic.indexOf('img1') != -1) {
try { try {
const utf8decoder = new TextDecoder() const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message) const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log("msg", msg) //msg为转换后的JSON数据 console.log('msg', msg); //msg为转换后的JSON数据
this.imgUrl1 = 'data:image/png;base64,' + msg.pic; this.imgUrl1 = 'data:image/png;base64,' + msg.pic;
console.log("imageUrl", imageUrl) console.log('imageUrl', imageUrl);
} catch { } catch {
let imageType = 'arraybuffer'; let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType }) const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log("imageUrl", imageUrl) console.log('imageUrl', imageUrl);
} }
} else if (topic.indexOf("img2") != -1) { } else if (topic.indexOf('img2') != -1) {
try { try {
const utf8decoder = new TextDecoder() const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message) const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log("msg", msg) //msg为转换后的JSON数据 console.log('msg', msg); //msg为转换后的JSON数据
this.imgUrl2 = 'data:image/png;base64,' + msg.pic; this.imgUrl2 = 'data:image/png;base64,' + msg.pic;
console.log("imageUrl", imageUrl) console.log('imageUrl', imageUrl);
} catch { } catch {
let imageType = 'arraybuffer'; let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType }) const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log("imageUrl", imageUrl) console.log('imageUrl', imageUrl);
} }
} else if (topic.indexOf("img3") != -1) { } else if (topic.indexOf('img3') != -1) {
try { try {
const utf8decoder = new TextDecoder() const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message) const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log("msg", msg) //msg为转换后的JSON数据 console.log('msg', msg); //msg为转换后的JSON数据
this.imgUrl3 = 'data:image/png;base64,' + msg.pic; this.imgUrl3 = 'data:image/png;base64,' + msg.pic;
console.log("imageUrl", imageUrl) console.log('imageUrl', imageUrl);
} catch { } catch {
let imageType = 'arraybuffer'; let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType }) const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log("imageUrl", imageUrl) console.log('imageUrl', imageUrl);
} }
} else if (topic.indexOf("img4") != -1) { } else if (topic.indexOf('img4') != -1) {
try { try {
const utf8decoder = new TextDecoder() const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message) const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log("msg", msg) //msg为转换后的JSON数据 console.log('msg', msg); //msg为转换后的JSON数据
this.imgUrl4 = 'data:image/png;base64,' + msg.pic; this.imgUrl4 = 'data:image/png;base64,' + msg.pic;
console.log("imageUrl", imageUrl) console.log('imageUrl', imageUrl);
} catch { } catch {
let imageType = 'arraybuffer'; let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType }) const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log("imageUrl", imageUrl) console.log('imageUrl', imageUrl);
} }
} else if (topic.indexOf("img5") != -1) { } else if (topic.indexOf('img5') != -1) {
try { try {
const utf8decoder = new TextDecoder() const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message) const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log("msg", msg) //msg为转换后的JSON数据 console.log('msg', msg); //msg为转换后的JSON数据
this.imgUrl5 = 'data:image/png;base64,' + msg.pic; this.imgUrl5 = 'data:image/png;base64,' + msg.pic;
console.log("imageUrl", imageUrl) console.log('imageUrl', imageUrl);
} catch { } catch {
let imageType = 'arraybuffer'; let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType }) const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log("imageUrl", imageUrl) console.log('imageUrl', imageUrl);
} }
} else if (topic.indexOf("stream0") != -1) { } else if (topic.indexOf('stream0') != -1) {
// console.log( // console.log(
// `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, // `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
// new Date(), // new Date(),
// new Date().getMilliseconds() // new Date().getMilliseconds()
// ); // );
} else if (topic.indexOf("stream0") != -1) { } else if (topic.indexOf('stream0') != -1) {
// console.log( // console.log(
// `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, // `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
// new Date(), // new Date(),
// new Date().getMilliseconds() // new Date().getMilliseconds()
// ); // );
} else if (topic.indexOf("stream1") != -1) { } else if (topic.indexOf('stream1') != -1) {
console.log( console.log(
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
new Date(), new Date(),
new Date().getMilliseconds() new Date().getMilliseconds()
); );
} else if (topic.indexOf("stream2") != -1) { } else if (topic.indexOf('stream2') != -1) {
console.log( console.log(
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
new Date(), new Date(),
new Date().getMilliseconds() new Date().getMilliseconds()
); );
} else if (topic.indexOf("stream3") != -1) { } else if (topic.indexOf('stream3') != -1) {
console.log( console.log(
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
new Date(), new Date(),
new Date().getMilliseconds() new Date().getMilliseconds()
); );
} else if (topic.indexOf("stream4") != -1) { } else if (topic.indexOf('stream4') != -1) {
console.log( console.log(
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
new Date(), new Date(),
new Date().getMilliseconds() new Date().getMilliseconds()
); );
} else if (topic.indexOf("stream5") != -1) { } else if (topic.indexOf('stream5') != -1) {
console.log( console.log(
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
new Date(), new Date(),
new Date().getMilliseconds() new Date().getMilliseconds()
); );
} }
}); });
} }
}
},
} }
}; };
</script> </script>
@ -912,6 +948,18 @@ export default {
// text-align: left; // text-align: left;
// font-size: 16px; // font-size: 16px;
// } // }
.analysis{
.board-title {
font-size: 17px;
font-weight: bolder;
}
}
.analysis .warning{
display: flex;
flex-flow: row nowrap;
align-items: center;
margin-bottom: 15px;
}
.dataBoard { .dataBoard {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -920,25 +968,19 @@ export default {
// width: 80%; // width: 80%;
// border: 1px solid gray; // border: 1px solid gray;
box-sizing: border-box; box-sizing: border-box;
padding: 15px; padding: 0 15px;
margin-bottom: 1%; margin-bottom: 15px;
} }
.dataBoard .region, .dataBoard .region,
.dataBoard .section { .dataBoard .section {
width: 80%; width: 80%;
// border: 1px solid gray; // border: 1px solid gray;
border: 1px solid #E4E7ED; // border: 1px solid #e4e7ed;
box-sizing: border-box; box-sizing: border-box;
padding: 15px; padding: 0 15px;
margin-bottom: 3%; margin-bottom: 15px;
} }
.dataBoard .board-title {
font-size: 17px;
font-weight: bolder;
position: relative;
margin-bottom: 30px;
}
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;