增加了dev和pro 不需要在开发时候切换ip了,打包不影响

This commit is contained in:
qiudan 2023-11-24 16:33:36 +08:00
parent 206fec9c18
commit 50b57d731b
26 changed files with 7162 additions and 2823 deletions

1
.env.dev Normal file
View File

@ -0,0 +1 @@
NODE_ENV = "development"

1
.env.pro Normal file
View File

@ -0,0 +1 @@
NODE_ENV = "production"

View File

@ -57,12 +57,13 @@
<script>
var ip = window.location.host;
if (flvjs.isSupported()) {
console.log("getParam('src')-",getParam('src'));
// console.log("getParam('src')-", getParam('src'));
// console.log("getSrcParam('src')-", getSrcParam());
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
url:getNewurl(),//新逻辑
url: getNewurl(), //新逻辑
// url: 'ws://172.16.1.168:12309/rtsp/1/a/?url=' + getParam('src').replace(/\s+/g, '')
// url:'ws://'+ip.split(':')[0]+':12309/rtsp/1/a/?url='+getParam('src').replace(/\s+/g, '')
});
@ -83,8 +84,18 @@
if (r != null) return decodeURI(decodeURI(r[2]));
}
function getSrcParam() {
console.log("getSrcParam('src')-", location.search);
var srcIndex = location.search.indexOf('src=');
if (srcIndex !== -1) {
var srcSubstring = location.search.substring(srcIndex + 4); // 4 是 'src=' 的长度
return decodeURIComponent(srcSubstring);
}
return null;
}
function getNewurl() {
let src = getParam('src').replace(/\s+/g, '');
let src = getSrcParam();
let url='ws://'+ip.split(':')[0]+':12309/rtsp';
// let url = 'ws://172.16.1.168:12309/rtsp';
// console.log('getNewurl',src)
@ -96,7 +107,7 @@
} else {
url = url + '/1/a/?url=' + src;
}
console.log('getNewurl-return',url)
console.log('getNewurl-return', url)
return url;
}
</script>

View File

@ -21,6 +21,7 @@
</template>
<script>
import { getNameFromTargetType } from '@/utils/targetType';
export default {
name: 'barChart', //
props: {
@ -55,7 +56,7 @@ export default {
drawBar(newVal) {
if (newVal && newVal.type_data && newVal.type_data.length > 0) {
var xData = newVal.type_data.map((ele) => {
return ele.name;
return getNameFromTargetType(ele.name);
});
var yData = newVal.type_data.map((ele) => {
return ele.quantity;

View File

@ -22,6 +22,7 @@
</template>
<script>
import { getNameFromTargetType } from '@/utils/targetType';
export default {
name: 'lineChart', //线
props: {
@ -299,7 +300,7 @@ export default {
});
lineArr.push({
name: item.name,
name: getNameFromTargetType(item.name),
data: valueList,
type: 'line',
smooth: true
@ -426,7 +427,19 @@ export default {
// console.log(this.$parent.dataArr, 'dataArr');
// this.$set(this.$parent.dataArr)
},
watch: {}
watch: {
// list: {
// handler: function (newval, oldVal) {
// if (newval && newval.length > 0) {
// this.$nextTick(() => {
// this.drawLine(newval, this.title, this.status);
// });
// }
// },
// deep: true
// // immediate: true
// }
}
};
</script>
<style scoped>

View File

@ -21,6 +21,7 @@
</template>
<script>
import { getNameFromTargetType } from '@/utils/targetType';
export default {
name: 'pieChart', //
props: {
@ -56,10 +57,10 @@ export default {
// });
var seriesData = [];
newVal.type_data.forEach((ele) => {
console.log(JSON.stringify(ele))
// console.log(JSON.stringify(ele))
if (ele.quantity != 0) {
seriesData.push({
name: ele.name,
name: getNameFromTargetType(ele.name),
value: ele.quantity
});
// legend.push(ele.name)

View File

@ -18,6 +18,9 @@
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@ -61,6 +64,9 @@
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@ -104,6 +110,9 @@
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@ -184,7 +193,10 @@
</template>
<script>
import { getNameFromTargetType } from '@/utils/targetType';
import tableShow from './tableShow.vue';
export default {
components: { tableShow },
name: 'tableShow', //
props: {
msg: {
@ -199,6 +211,7 @@ export default {
},
data() {
return {
getNameFromTargetType,
dialogVisible: false,
startTime: '',
endTime: '',

View File

@ -20,6 +20,9 @@
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
<el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@ -60,6 +63,9 @@
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
<el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@ -101,6 +107,9 @@
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" prop="interval" label="时间序号"></el-table-column>
<el-table-column align="center" prop="type" label="目标类型">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@ -201,6 +210,7 @@
</template>
<script>
import { getNameFromTargetType } from '@/utils/targetType';
export default {
name: 'tableShow', //
props: {
@ -216,6 +226,7 @@ export default {
},
data() {
return {
getNameFromTargetType,
dialogVisible: false,
startTime: '',
endTime: '',

View File

@ -3,6 +3,7 @@
</template>
<script>
import { getNameFromTargetType } from '@/utils/targetType';
export default {
name: 'echartsBar',
props: {
@ -67,7 +68,7 @@
quantity = this.dataList[0].type_data[j].value;
}
this.chartData.yData.push(quantity);
this.chartData.xData.push(this.dataList[0].type_data[j].name);
this.chartData.xData.push(getNameFromTargetType(this.dataList[0].type_data[j].name));
}
}
},

View File

@ -3,6 +3,7 @@
</template>
<script>
import { getNameFromTargetType } from '@/utils/targetType';
export default {
name: 'echartsLine', //线
props: {
@ -160,7 +161,7 @@ export default {
});
transformedData.push({
name: item.name,
name: getNameFromTargetType(item.name),
value: valueList
});
}
@ -227,7 +228,7 @@ export default {
});
transformedData.push({
name: item.name,
name: getNameFromTargetType(item.name),
value: valueList
});
}
@ -295,7 +296,7 @@ export default {
});
transformedData.push({
name: item.name,
name: getNameFromTargetType(item.name),
value: valueList
});
}
@ -568,9 +569,9 @@ export default {
};
if (myChart) {
myChart.setOption(option);
window.addEventListener('resize', () => {
window.onresize = () => {
myChart.resize();
});
};
}
}
},
@ -580,11 +581,11 @@ export default {
$dom.style.width = '440px';
$dom.style.height = '260px';
setTimeout(() => {
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
}
that.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
}
that.initEcharts();
});
}, 300);

View File

@ -3,6 +3,7 @@
</template>
<script>
import { getNameFromTargetType } from '@/utils/targetType';
export default {
name: 'echartsPie', //线
props: {
@ -97,6 +98,7 @@ export default {
let temp=[];
seriesData.forEach((ele) => {
if (ele.value != 0) {
ele.name = getNameFromTargetType(ele.name);
temp.push(ele)
}
})

View File

@ -9,6 +9,9 @@
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@ -52,6 +55,9 @@
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@ -95,6 +101,9 @@
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@ -139,6 +148,7 @@
</template>
<script>
import { getNameFromTargetType } from '@/utils/targetType';
export default {
name: 'regionTable',
props: {
@ -154,6 +164,7 @@ export default {
},
data() {
return {
getNameFromTargetType,
//
tableOptions: [
{

View File

@ -9,6 +9,9 @@
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
<el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@ -49,6 +52,9 @@
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
<el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@ -89,6 +95,9 @@
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" prop="interval" label="时间序号"></el-table-column>
<el-table-column align="center" prop="type" label="目标类型">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@ -151,6 +160,7 @@
</template>
<script>
import { getNameFromTargetType } from '@/utils/targetType';
export default {
name: 'tableShow',
props: {
@ -166,6 +176,7 @@ export default {
},
data() {
return {
getNameFromTargetType,
//
tableOptions: [
{

View File

@ -12,7 +12,7 @@
style="width: 150px; margin-bottom: 20px; text-align: center"
>
<div>
<span style="font-size: 15px">{{ n.name }}</span
<span style="font-size: 15px">{{ getNameFromTargetType(n.name) }}</span
><br />
<span style="font-size: 30px; font-weight: bold">{{
n.quantity || n.quantity === 0 ? n.quantity : ' - '
@ -36,7 +36,7 @@
style="width: 150px; margin-bottom: 20px; text-align: center"
>
<div>
<span style="font-size: 15px">{{ n.name }}</span
<span style="font-size: 15px">{{ getNameFromTargetType(n.name) }}</span
><br />
<span style="font-size: 30px; font-weight: bold">{{
n.quantity || n.quantity === 0 ? n.quantity : ' - '
@ -210,8 +210,8 @@
<div>
<div v-if="newDataArr[0].time">
<!-- {{ newDataArr[0].time ? newDataArr[0].time : '' }} -->
<div>{{newDataArr[0].time.slice(0, 11)}}</div>
<div>{{newDataArr[0].time.slice(11)}}</div>
<div>{{ newDataArr[0].time.slice(0, 11) }}</div>
<div>{{ newDataArr[0].time.slice(11) }}</div>
</div>
</div>
</div>
@ -325,6 +325,7 @@ import pieChart from '../chart/pieChart.vue';
import detailDialog from '../chart/detailDialog.vue';
import regionTable from '../chart/regionTable.vue';
import thermalChart from '../chart/thermalChart.vue';
import { getNameFromTargetType } from '@/utils/targetType';
export default {
name: 'typeChart', //
props: [
@ -351,6 +352,7 @@ export default {
},
data() {
return {
getNameFromTargetType,
//
total: 0,
//
@ -370,7 +372,11 @@ export default {
methods: {
//
getDataArr(val) {
// console.log('getDataArr', val);
// if(val&&val.length>0){
// if(val[0].component_name=='_4')
// console.log('typeChart-getDataArr', val);
// }
this.newDataArr = val;
this.getNewQueue(this.newDataArr);
},
@ -391,8 +397,7 @@ export default {
this.cycleAccumulateDataArr[0].headway = val[0].headway;
}
if (val[0].ave_headway) {
this.cycleAccumulateDataArr[0].headway = val[0].ave_headway==-1?'-':val[0].ave_headway;
this.cycleAccumulateDataArr[0].headway = val[0].ave_headway == -1 ? '-' : val[0].ave_headway;
}
if (val[0].n_stay) {
this.cycleAccumulateDataArr[0].n_stay = val[0].n_stay;
@ -409,9 +414,9 @@ export default {
return cur.quantity + prev;
}, 0);
}
return 0
return 0;
}
return 0
return 0;
}
},
getNewQueue(val) {
@ -425,7 +430,7 @@ export default {
this.newDataArr[0].headway = val[0].headway;
}
if (val[0].ave_headway) {
this.newDataArr[0].headway = val[0].ave_headway==-1?'-':val[0].ave_headway;
this.newDataArr[0].headway = val[0].ave_headway == -1 ? '-' : val[0].ave_headway;
}
if (val[0].n_stay) {
this.newDataArr[0].n_stay = val[0].n_stay;
@ -524,14 +529,13 @@ export default {
};
</script>
<style scoped>
.spacialCard {
width: 150px;
margin-bottom: 20px;
width: 150px;
margin-bottom: 20px;
text-align: center;
}
::v-deep.spacialCard .el-card__body{
::v-deep.spacialCard .el-card__body {
padding: 10px;
}

View File

@ -1,4 +1,7 @@
var ipUurl = window.location.host.split(':')[0];
if (process.env.NODE_ENV === 'development') {
ipUurl = '172.16.1.168'
}
// var ipUurl = '172.16.1.168'
export default {
// dataUrl: "http://172.16.1.22:8080/api/AddShipjk",
@ -54,26 +57,26 @@ export default {
// getJianktx: `http://${ipUurl}:5000/api/GetJianktx`,
//编辑保存组件弹窗传参
editComponent: `http://${ipUurl}:5000/api/SetMonqjkzjcs`,
//保存主机名称
//保存主机名称
editRoleApi: `http://${ipUurl}:5000/api/EditZhangh`,
saveRoleApi: `http://${ipUurl}:5000/api/AddZhangh`,
saveRoleApi: `http://${ipUurl}:5000/api/AddZhangh`,
saveSetFtppz: `http://${ipUurl}:5000/api/SetFtppz`,
//编辑保存组件弹窗传参
//编辑保存组件弹窗传参
setHostName: `http://${ipUurl}:5000/api/SetHostName`,
setHostTime: `http://${ipUurl}:5000/api/SetHostTime`,
changePassowrd:`http://${ipUurl}:5000/api/ChangePassword`,
changePassowrd: `http://${ipUurl}:5000/api/ChangePassword`,
//还原服务器设置上传
postConfigRestore:`http://${ipUurl}:5000/api/ConfigRestore`,
postConfigRestore: `http://${ipUurl}:5000/api/ConfigRestore`,
//更新软件版本
postConfigUpdate:`http://${ipUurl}:5000/api/Update`,
postConfigUpdate: `http://${ipUurl}:5000/api/Update`,
//新增接入方
postAddJierf:`http://${ipUurl}:5000/api/AddJierf`,
postAddJierf: `http://${ipUurl}:5000/api/AddJierf`,
//编辑接入方
postEditJierf:`http://${ipUurl}:5000/api/EditJierf`,
postEditJierf: `http://${ipUurl}:5000/api/EditJierf`,
//设置组件
setComponents:`http://${ipUurl}:5000/api/SetComponents`,
setAccessParty:`http://${ipUurl}:5000/api/setAccessParty`,
setComponents: `http://${ipUurl}:5000/api/SetComponents`,
setAccessParty: `http://${ipUurl}:5000/api/setAccessParty`,
//自动校时接口
setAutomatic:`http://${ipUurl}:5000/api/SetAutomaticTiming`,
};
setAutomatic: `http://${ipUurl}:5000/api/SetAutomaticTiming`,
};

View File

@ -2,6 +2,9 @@ import mqtt from "mqtt";
import Vue from 'vue'
var vm = new Vue();
var ip = window.location.host.split(":")[0];
if (process.env.NODE_ENV === 'development') {
ip = '172.16.1.168'
}
// var ip = '172.16.1.168';
console.log("ip", ip)
class mqttHandle {
@ -47,7 +50,10 @@ class mqttHandle {
} = this.connect;
console.log("this.connect.host", this.connect.host)
// const connectUrl = 'ws://172.16.1.168:10087/';
const connectUrl = `ws://${this.connect.host}:${this.connect.port}`;
let connectUrl = `ws://${this.connect.host}:${this.connect.port}`;
if (process.env.NODE_ENV === 'development') {
connectUrl = 'ws://172.16.1.168:10087/';
}
// if (!client.connected) {
// client.on('connect', function () {
// console.log('连接成功')

24
src/utils/targetType.js Normal file
View File

@ -0,0 +1,24 @@
const targetTypeObj = {
'traffic police': '交警',
'sanitation worker': '环卫工人',
'general pedestrian': '一般行人',
'car': '小汽车',
'truck': '卡车',
'coach': '大巴车',
'bus': '公交车',
'special vehicle': '特种车辆',
'construction vehicle': '建筑车辆',
'tricycle': '三轮车',
'bicycle': '自行车',
'electric bicycle': '电瓶车',
'fire': '火灾',
}
export function getNameFromTargetType(keys, defaultValue = '', separator = '|') {
if (keys) {
const keyArray = keys.split(separator);
const resultArray = keyArray.map(key => targetTypeObj[key] || key);
return resultArray.join(separator) || defaultValue;
}
return ''
}

View File

@ -447,6 +447,9 @@ export default {
this.videoList[i].videoAnalysisStatus = '已分析';
var ip = window.location.host;
var ipData = 'http://' + ip.split(':')[0];
if (process.env.NODE_ENV === 'development') {
ipData = 'http://172.16.1.168';
}
// var ipData = 'http://172.16.1.168';
this.videoList[i].img = ipData + msg.pic_path;
} else if (msg.type == 'video_analyse_unusual' && msg.video_id == this.videoList[i].id) {
@ -832,6 +835,9 @@ export default {
var arr = [];
var ip = window.location.host;
var ipData = 'http://' + ip.split(':')[0];
if (process.env.NODE_ENV === 'development') {
ipData = 'http://172.16.1.168';
}
// var ipData = 'http://172.16.1.168';
res.data.data.forEach((item) => {
if (this.videoTypeForm.videoType == '离线视频' && item.videoAnalysisStatus == '已分析') {

File diff suppressed because it is too large Load Diff

View File

@ -1,313 +1,309 @@
<template>
<div >
<div >
<div style="width:100%;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 src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none"
<div>
<div>
<div style="width: 100%; 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 src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none"
ref="iframe"></iframe> -->
</div>
<el-dialog title="提示" :visible.sync="showUpdateCertificate" width="30%">
<el-row>
<el-col :span="6">
文件选择
</el-col>
<el-col :span="18">
<el-upload action="https://jsonplaceholder.typicode.com/posts/">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-col>
</el-row>
</div>
<el-dialog title="提示" :visible.sync="showUpdateCertificate" width="30%">
<el-row>
<el-col :span="6"> 文件选择 </el-col>
<el-col :span="18">
<el-upload action="https://jsonplaceholder.typicode.com/posts/">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="showUpdateCertificate = false"> </el-button>
</span>
</el-dialog>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="showUpdateCertificate = false"> </el-button>
</span>
</el-dialog>
</div>
</div>
</div>
</template>
<script>
import mqtt from "mqtt"; // mqtt
import mqtt from 'mqtt'; // mqtt
export default {
data() {
return {
form: {
name1: '离线',
name2: '重新配置',
state: '关',
endTime: '连接',
blacklist: '-1x-1',
autograph: '-1x-1',
version: '0',
version1: '0',
version2: '0',
version4: '',
version5: '不受支持的',
version6: '不受支持的',
version7: '不受支持的',
version8: '不受支持的',
},
showUpdateCertificate: false,
}
},
created() {
this.testMqtt()
},
methods: {
// mqtt
testMqtt() {
this.getDataByMqtt()
data() {
return {
form: {
name1: '离线',
name2: '重新配置',
state: '关',
endTime: '连接',
blacklist: '-1x-1',
autograph: '-1x-1',
version: '0',
version1: '0',
version2: '0',
version4: '',
version5: '不受支持的',
version6: '不受支持的',
version7: '不受支持的',
version8: '不受支持的'
},
showUpdateCertificate: false
};
},
// mqtt
getDataByMqtt(url, topic, cIdNum) {
const clientId = "test_id_" + String(new Date().getTime()); //
// const host = 'ws://49.234.27.18:10087/'; // urlws://broker.emqx.io:8083/mqtt
var ip = window.location.host.split(":")[0];
console.log("ip",ip)
const host = `ws://${ip}:10087`;
// const host = 'ws://172.16.1.168:10087/';
const options = {
//
// IP
// host: host,
// port: port,
// host:"172.16.1.168:10086",
keepalive: 60, // 60s0
username: 'admin', //
password: '123456', //
clientId: clientId, // ID
protocolId: "MQTT",
protocolVersion: 4,
clean: true, // false线QoS12
reconnectPeriod: 2000, // 1000
connectTimeout: 30 * 1000, // CONNACK
will: {
// Broker
topic: "img1", //
payload: "[MQTT-TEST] 遗嘱消息:连接异常断开!", //
qos: 0, // QoS(Quality of Service)QoS0QoS11QoS21
retain: false, //
created() {
this.testMqtt();
},
methods: {
// mqtt
testMqtt() {
this.getDataByMqtt();
},
};
if (this.mqttClient == undefined) {
this.mqttClient = mqtt.connect(host, options); //
// const client = mqtt.connect(host, options); //
// const client = mqtt.connect(host) //
//
// console.log("this.mqttClient", this.mqttClient)
this.mqttClient.on("error", (err) => {
console.log("[MQTT-TEST] 连接错误:", err);
this.mqttClient.end();
});
//
this.mqttClient.on("reconnect", (reconnect) => {
// console.log("[MQTT-TEST] ", reconnect);
});
//
this.mqttClient.on("connect", (connect) => {
// console.log("[MQTT-TEST] ID: ", connect);
//
this.mqttClient.subscribe('img0', { qos: 0 });
this.mqttClient.publish('aaa', '111');
this.mqttClient.subscribe('img1', { qos: 0 });
this.mqttClient.subscribe('img2', { qos: 0 });
this.mqttClient.subscribe('img3', { qos: 0 });
this.mqttClient.subscribe('img4', { qos: 0 });
this.mqttClient.subscribe('img5', { qos: 0 });
this.mqttClient.subscribe('img6', { qos: 0 });
this.mqttClient.subscribe('img7', { qos: 0 });
this.mqttClient.subscribe('stream0', { qos: 0 });
this.mqttClient.subscribe('stream1', { qos: 0 });
this.mqttClient.subscribe('stream2', { qos: 0 });
this.mqttClient.subscribe('stream3', { qos: 0 });
this.mqttClient.subscribe('stream4', { qos: 0 });
this.mqttClient.subscribe('stream5', { qos: 0 });
this.mqttClient.subscribe('stream6', { qos: 0 });
this.mqttClient.subscribe('stream7', { qos: 0 });
});
//
this.mqttClient.on("message", (topic, message, packet) => {
if (topic.indexOf("img0") != -1) {
try {
const utf8decoder = new TextDecoder()
const u8arr = new Uint8Array(message)
const temp = utf8decoder.decode(u8arr) //
const msg = JSON.parse(temp) //JSON
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
} catch {
let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType })
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
console.log("imageUrl", imageUrl)
// mqtt
getDataByMqtt(url, topic, cIdNum) {
const clientId = 'test_id_' + String(new Date().getTime()); //
// const host = 'ws://49.234.27.18:10087/'; // urlws://broker.emqx.io:8083/mqtt
var ip = window.location.host.split(':')[0];
console.log('ip', ip);
let host = `ws://${ip}:10087`;
if (process.env.NODE_ENV === 'development') {
host = 'ws://172.16.1.168:10087/';
}
} 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) //msgJSON
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
} catch {
let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType })
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
console.log("imageUrl", imageUrl)
}
} else if (topic.indexOf("img2") != -1) {
try {
const utf8decoder = new TextDecoder()
const u8arr = new Uint8Array(message)
const temp = utf8decoder.decode(u8arr) //
const msg = JSON.parse(temp) //JSON
console.log("msg", msg) //msgJSON
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
} catch {
let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType })
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
console.log("imageUrl", imageUrl)
}
} else if (topic.indexOf("img3") != -1) {
try {
const utf8decoder = new TextDecoder()
const u8arr = new Uint8Array(message)
const temp = utf8decoder.decode(u8arr) //
const msg = JSON.parse(temp) //JSON
console.log("msg", msg) //msgJSON
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
} catch {
let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType })
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
console.log("imageUrl", imageUrl)
}
} else if (topic.indexOf("img4") != -1) {
try {
const utf8decoder = new TextDecoder()
const u8arr = new Uint8Array(message)
const temp = utf8decoder.decode(u8arr) //
const msg = JSON.parse(temp) //JSON
console.log("msg", msg) //msgJSON
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
} catch {
let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType })
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
console.log("imageUrl", imageUrl)
}
} else if (topic.indexOf("img5") != -1) {
try {
const utf8decoder = new TextDecoder()
const u8arr = new Uint8Array(message)
const temp = utf8decoder.decode(u8arr) //
const msg = JSON.parse(temp) //JSON
console.log("msg", msg) //msgJSON
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
} catch {
let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType })
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
console.log("imageUrl", imageUrl)
}
} else if (topic.indexOf("img6") != -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) //msgJSON
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
} catch {
let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType })
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
console.log("imageUrl", imageUrl)
}
}else if (topic.indexOf("img7") != -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) //msgJSON
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
} catch {
let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType })
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
console.log("imageUrl", imageUrl)
}
}else if (topic.indexOf("stream0") != -1) {
const utf8decoder = new TextDecoder()
const u8arr = new Uint8Array(message)
const temp = utf8decoder.decode(u8arr) //
const msg = JSON.parse(temp)
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
} else if (topic.indexOf("stream1") != -1) {
const utf8decoder = new TextDecoder()
const u8arr = new Uint8Array(message)
const temp = utf8decoder.decode(u8arr) //
const msg = JSON.parse(temp)
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
} else if (topic.indexOf("stream2") != -1) {
const utf8decoder = new TextDecoder()
const u8arr = new Uint8Array(message)
const temp = utf8decoder.decode(u8arr) //
const msg = JSON.parse(temp)
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
} else if (topic.indexOf("stream3") != -1) {
const utf8decoder = new TextDecoder()
const u8arr = new Uint8Array(message)
const temp = utf8decoder.decode(u8arr) //
const msg = JSON.parse(temp)
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
} else if (topic.indexOf("stream4") != -1) {
const utf8decoder = new TextDecoder()
const u8arr = new Uint8Array(message)
const temp = utf8decoder.decode(u8arr) //
const msg = JSON.parse(temp)
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
} else if (topic.indexOf("stream5") != -1) {
const utf8decoder = new TextDecoder()
const u8arr = new Uint8Array(message)
const temp = utf8decoder.decode(u8arr) //
const msg = JSON.parse(temp)
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
}else if (topic.indexOf("stream6") != -1) {
const utf8decoder = new TextDecoder()
const u8arr = new Uint8Array(message)
const temp = utf8decoder.decode(u8arr) //
const msg = JSON.parse(temp)
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
}else if (topic.indexOf("stream7") != -1) {
const utf8decoder = new TextDecoder()
const u8arr = new Uint8Array(message)
const temp = utf8decoder.decode(u8arr) //
const msg = JSON.parse(temp)
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
}
// const host = 'ws://172.16.1.168:10087/';
});
}
const options = {
//
// IP
// host: host,
// port: port,
// host:"172.16.1.168:10086",
keepalive: 60, // 60s0
username: 'admin', //
password: '123456', //
clientId: clientId, // ID
protocolId: 'MQTT',
protocolVersion: 4,
clean: true, // false线QoS12
reconnectPeriod: 2000, // 1000
connectTimeout: 30 * 1000, // CONNACK
will: {
// Broker
topic: 'img1', //
payload: '[MQTT-TEST] 遗嘱消息:连接异常断开!', //
qos: 0, // QoS(Quality of Service)QoS0QoS11QoS21
retain: false //
}
};
if (this.mqttClient == undefined) {
this.mqttClient = mqtt.connect(host, options); //
// const client = mqtt.connect(host, options); //
// const client = mqtt.connect(host) //
//
// console.log("this.mqttClient", this.mqttClient)
this.mqttClient.on('error', (err) => {
console.log('[MQTT-TEST] 连接错误:', err);
this.mqttClient.end();
});
//
this.mqttClient.on('reconnect', (reconnect) => {
// console.log("[MQTT-TEST] ", reconnect);
});
//
this.mqttClient.on('connect', (connect) => {
// console.log("[MQTT-TEST] ID: ", connect);
//
this.mqttClient.subscribe('img0', { qos: 0 });
this.mqttClient.publish('aaa', '111');
this.mqttClient.subscribe('img1', { qos: 0 });
this.mqttClient.subscribe('img2', { qos: 0 });
this.mqttClient.subscribe('img3', { qos: 0 });
this.mqttClient.subscribe('img4', { qos: 0 });
this.mqttClient.subscribe('img5', { qos: 0 });
this.mqttClient.subscribe('img6', { qos: 0 });
this.mqttClient.subscribe('img7', { qos: 0 });
this.mqttClient.subscribe('stream0', { qos: 0 });
this.mqttClient.subscribe('stream1', { qos: 0 });
this.mqttClient.subscribe('stream2', { qos: 0 });
this.mqttClient.subscribe('stream3', { qos: 0 });
this.mqttClient.subscribe('stream4', { qos: 0 });
this.mqttClient.subscribe('stream5', { qos: 0 });
this.mqttClient.subscribe('stream6', { qos: 0 });
this.mqttClient.subscribe('stream7', { qos: 0 });
});
},
}
}
//
this.mqttClient.on('message', (topic, message, packet) => {
if (topic.indexOf('img0') != -1) {
try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); //
const msg = JSON.parse(temp); //JSON
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
} catch {
let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log('imageUrl', imageUrl);
}
} else if (topic.indexOf('img1') != -1) {
try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); //
const msg = JSON.parse(temp); //JSON
// console.log("msg", msg) //msgJSON
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
} catch {
let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log('imageUrl', imageUrl);
}
} else if (topic.indexOf('img2') != -1) {
try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); //
const msg = JSON.parse(temp); //JSON
console.log('msg', msg); //msgJSON
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
} catch {
let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log('imageUrl', imageUrl);
}
} else if (topic.indexOf('img3') != -1) {
try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); //
const msg = JSON.parse(temp); //JSON
console.log('msg', msg); //msgJSON
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
} catch {
let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log('imageUrl', imageUrl);
}
} else if (topic.indexOf('img4') != -1) {
try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); //
const msg = JSON.parse(temp); //JSON
console.log('msg', msg); //msgJSON
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
} catch {
let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log('imageUrl', imageUrl);
}
} else if (topic.indexOf('img5') != -1) {
try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); //
const msg = JSON.parse(temp); //JSON
console.log('msg', msg); //msgJSON
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
} catch {
let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log('imageUrl', imageUrl);
}
} else if (topic.indexOf('img6') != -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); //msgJSON
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
} catch {
let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log('imageUrl', imageUrl);
}
} else if (topic.indexOf('img7') != -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); //msgJSON
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
} catch {
let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log('imageUrl', imageUrl);
}
} else if (topic.indexOf('stream0') != -1) {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); //
const msg = JSON.parse(temp);
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
} else if (topic.indexOf('stream1') != -1) {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); //
const msg = JSON.parse(temp);
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
} else if (topic.indexOf('stream2') != -1) {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); //
const msg = JSON.parse(temp);
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
} else if (topic.indexOf('stream3') != -1) {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); //
const msg = JSON.parse(temp);
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
} else if (topic.indexOf('stream4') != -1) {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); //
const msg = JSON.parse(temp);
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
} else if (topic.indexOf('stream5') != -1) {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); //
const msg = JSON.parse(temp);
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
} else if (topic.indexOf('stream6') != -1) {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); //
const msg = JSON.parse(temp);
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
} else if (topic.indexOf('stream7') != -1) {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); //
const msg = JSON.parse(temp);
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
}
});
}
}
}
};
</script>
<style>
.test-div i {
font-size: 25px;
font-size: 25px;
}
.el-form-item {
margin-bottom: 0px;
margin-bottom: 0px;
}
</style>

View File

@ -468,12 +468,12 @@ export default {
//
triggerListData: {
handler(newVal) {
// //console.log("newVal",newVal,'')
// console.log("triggerListData-",newVal)
this.triggerList = newVal;
// //console.log("oldVal",oldVal)
//
var _this = this;
if (newVal.length != 0 && _this.sectionData) {
if (newVal.length != 0 && _this.sectionData.length>0) {
_this.classify.forEach((ele, index) => {
if (ele.trigger == undefined && ele.timeMode == '实时触发') {
ele.trigger = [];
@ -498,6 +498,10 @@ export default {
if (item.type_data != null) {
_this.typeTimeMode = item;
}
//component_type
// if(item.component_name=='_4'){
// console.log("dataBoardtriggerListData-item",item)
// }
ele.trigger.unshift(item);
_this.$nextTick(() => {
if (_this.$refs.typeChartRef != undefined) {

File diff suppressed because it is too large Load Diff

View File

@ -676,6 +676,9 @@ export default {
//
backupHandle() {
var ipUrl = window.location.origin
if (process.env.NODE_ENV === 'development') {
ipUrl = '172.16.1.168';
}
// var ipUrl = '172.16.1.168'
this.$confirm('此操作将备份操作, 是否继续?', '提示', {
confirmButtonText: '确定',

View File

@ -107,23 +107,23 @@
<div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
<div style="text-align: center; font-weight: 700">行人/非机动车</div>
<el-checkbox-group v-model="typeCheckList">
<el-checkbox label="traffic police"></el-checkbox>
<el-checkbox label="traffic police"></el-checkbox>
<el-checkbox label="sanitation worker">环卫工人</el-checkbox>
<el-checkbox label="general pedestrian">普通行人</el-checkbox>
<el-checkbox label="general pedestrian">一般行人</el-checkbox>
<el-checkbox label="tricycle">三轮车</el-checkbox>
<el-checkbox label="bicycle">自行车</el-checkbox>
<el-checkbox label="electric bicycle"></el-checkbox>
<el-checkbox label="electric bicycle"></el-checkbox>
</el-checkbox-group>
</div>
<div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
<div style="text-align: center; font-weight: 700">机动车</div>
<el-checkbox-group v-model="typeCheckList">
<el-checkbox label="car">汽车</el-checkbox>
<el-checkbox label="car">汽车</el-checkbox>
<el-checkbox label="truck">卡车</el-checkbox>
<el-checkbox label="coach"></el-checkbox>
<el-checkbox label="coach">大巴</el-checkbox>
<el-checkbox label="bus">公交车</el-checkbox>
<el-checkbox label="special vehicle">专用汽车</el-checkbox>
<el-checkbox label="construction vehicle">施工车辆</el-checkbox>
<el-checkbox label="special vehicle">特种车辆</el-checkbox>
<el-checkbox label="construction vehicle">建筑车辆</el-checkbox>
</el-checkbox-group>
</div>
<div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
@ -248,23 +248,23 @@
<div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
<div style="text-align: center; font-weight: 700">行人/非机动车</div>
<el-checkbox-group v-model="componentForm.type" @change="handleTypeData">
<el-checkbox label="traffic police"></el-checkbox>
<el-checkbox label="traffic police"></el-checkbox>
<el-checkbox label="sanitation worker">环卫工人</el-checkbox>
<el-checkbox label="general pedestrian">普通行人</el-checkbox>
<el-checkbox label="general pedestrian">一般行人</el-checkbox>
<el-checkbox label="tricycle">三轮车</el-checkbox>
<el-checkbox label="bicycle">自行车</el-checkbox>
<el-checkbox label="electric bicycle"></el-checkbox>
<el-checkbox label="electric bicycle"></el-checkbox>
</el-checkbox-group>
</div>
<div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
<div style="text-align: center; font-weight: 700">机动车</div>
<el-checkbox-group v-model="componentForm.type" @change="handleTypeData">
<el-checkbox label="car">汽车</el-checkbox>
<el-checkbox label="car">汽车</el-checkbox>
<el-checkbox label="truck">卡车</el-checkbox>
<el-checkbox label="coach"></el-checkbox>
<el-checkbox label="coach">大巴</el-checkbox>
<el-checkbox label="bus">公交车</el-checkbox>
<el-checkbox label="special vehicle">专用汽车</el-checkbox>
<el-checkbox label="construction vehicle">施工车辆</el-checkbox>
<el-checkbox label="special vehicle">特种车辆</el-checkbox>
<el-checkbox label="construction vehicle">建筑车辆</el-checkbox>
</el-checkbox-group>
</div>
<div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
@ -1333,6 +1333,9 @@ export default {
//
analysisData() {
var ip = window.location.host.split(':')[0];
if (process.env.NODE_ENV === 'development') {
ip = '172.16.1.168';
}
// var ip = '172.16.1.168'; //http://172.16.1.168
//console.log('ip', ip);
getAnalysisData(this.$route.query.id, ip).then((res) => {
@ -1373,6 +1376,9 @@ export default {
//
postTraffic() {
var ip = window.location.host.split(':')[0];
if (process.env.NODE_ENV === 'development') {
ip = '172.16.1.168';
}
// var ip = '172.16.1.168'; //http://172.16.1.168:5000
//console.log('ip', ip);
getAnalysisData(this.$route.query.id, ip).then((res) => {
@ -1492,8 +1498,8 @@ export default {
// //console.log("item.name",item.name)
// })
// for (const item of msgN) {
// if (item.name == 'gate3') {
// console.log('trigger-', item);
// if (item.component_name == '_4') {
// console.log('trigger-', item);
// }
// }
this.triggerListData = msgN;
@ -1635,6 +1641,9 @@ export default {
var ip = window.location.host;
// this.ipData = 'http://' + ip.split(':')[0] + ':5000';
this.ipData = 'http://' + ip.split(':')[0];
if (process.env.NODE_ENV === 'development') {
this.ipData = 'http://172.16.1.168';
}
document.getElementById('mapModule').contentWindow.getIpData(this.ipData);
// document.getElementById('mapModule').contentWindow.getIpData('http://172.16.1.168');
if (this.$route.query.type == '离线视频') {

File diff suppressed because it is too large Load Diff

View File

@ -604,7 +604,7 @@
<el-radio-button :label="m + 1" v-for="(n, m) in o.children" :key="m"></el-radio-button>
</el-radio-group>
<!--初始化渲染图表-->
<div class="echartsList">
<div class="echartList">
<div :class="'echarts' + b" v-for="(e, b) in o.children" :key="b">
<div
style="width: 100%; height: 100%"
@ -616,7 +616,7 @@
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
<el-empty
:image-size="20"
:image-size="100"
description="暂无数据"
v-if="e.triggerDataList == null"
></el-empty>
@ -636,7 +636,7 @@
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
<el-empty
:image-size="20"
:image-size="100"
description="暂无数据"
v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
></el-empty>
@ -655,7 +655,7 @@
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
<el-empty
:image-size="20"
:image-size="100"
description="暂无数据"
v-if="e.cycleStatisticsData == null || e.cycleStatisticsData.length == 0"
></el-empty>
@ -683,10 +683,10 @@
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
<div style="width: 100%; height: 100%" v-if="e.graphicType == '断面'">
<tableShow :tableData="e.triggerNewData" :triggerType="e.timeMode" />
<tableShow :tableData="e.triggerDataList" :triggerType="e.timeMode" />
</div>
<div style="width: 100%; height: 100%" v-if="e.graphicType == '区域'">
<regionTable :tableData="e.triggerNewData" :triggerType="e.timeMode" />
<regionTable :tableData="e.triggerDataList" :triggerType="e.timeMode" />
</div>
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
@ -795,7 +795,7 @@
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
<el-empty
:image-size="20"
:image-size="100"
description="暂无数据"
v-if="e.triggerDataList == null"
></el-empty>
@ -811,7 +811,7 @@
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
<el-empty
:image-size="20"
:image-size="100"
description="暂无数据"
v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
></el-empty>
@ -827,7 +827,7 @@
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
<el-empty
:image-size="20"
:image-size="100"
description="暂无数据"
v-if="e.cycleStatisticsData.length == 0 || e.cycleStatisticsData.length == null"
></el-empty>
@ -852,7 +852,7 @@
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
<el-empty
:image-size="20"
:image-size="100"
description="暂无数据"
v-if="e.triggerDataList == null"
></el-empty>
@ -868,7 +868,7 @@
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
<el-empty
:image-size="20"
:image-size="100"
description="暂无数据"
v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
></el-empty>
@ -884,7 +884,7 @@
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
<el-empty
:image-size="20"
:image-size="100"
description="暂无数据"
v-if="e.cycleStatisticsData.length == 0 || e.cycleStatisticsData.length == null"
></el-empty>
@ -909,7 +909,7 @@
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
<el-empty
:image-size="20"
:image-size="100"
description="暂无数据"
v-if="e.triggerDataList == null"
></el-empty>
@ -924,7 +924,7 @@
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
<el-empty
:image-size="20"
:image-size="100"
description="暂无数据"
v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
></el-empty>
@ -939,7 +939,7 @@
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
<el-empty
:image-size="20"
:image-size="100"
description="暂无数据"
v-if="e.cycleStatisticsData.length == 0 || e.cycleStatisticsData.length == null"
></el-empty>
@ -963,7 +963,7 @@
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
<el-empty
:image-size="20"
:image-size="100"
description="暂无数据"
v-if="e.triggerDataList == null"
></el-empty>
@ -982,7 +982,7 @@
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
<el-empty
:image-size="20"
:image-size="100"
description="暂无数据"
v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
></el-empty>
@ -1001,7 +1001,7 @@
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
<el-empty
:image-size="20"
:image-size="100"
description="暂无数据"
v-if="e.cycleStatisticsData.length == 0 || e.cycleStatisticsData.length == null"
></el-empty>
@ -1877,7 +1877,6 @@ export default {
this.addSelectOptionField(obj[key]);
} else if (key == 'name') {
obj['selectOption'] = 1;
obj['triggerNewData'] = [];
}
}
}
@ -2784,13 +2783,19 @@ export default {
type_data: newValue,
originalSpeed: table.originalSpeed
};
this.addTimeDataCharts(data[i].children[j].children[n].children[m].triggerNewData, typeData);
} else {
if (data[i].children[j].children[n].children[m].triggerNewData.length > 10) {
data[i].children[j].children[n].children[m].triggerNewData =
data[i].children[j].children[n].children[m].triggerNewData.slice(-10);
if (!data[i].children[j].children[n].children[m].triggerDataList) {
data[i].children[j].children[n].children[m].triggerDataList = [];
}
this.addTimeDataCharts(data[i].children[j].children[n].children[m].triggerNewData, newValue);
this.addTimeDataCharts(data[i].children[j].children[n].children[m].triggerDataList, typeData);
} else {
if (!data[i].children[j].children[n].children[m].triggerDataList) {
data[i].children[j].children[n].children[m].triggerDataList = [];
}
if (data[i].children[j].children[n].children[m].triggerDataList.length > 10) {
data[i].children[j].children[n].children[m].triggerDataList =
data[i].children[j].children[n].children[m].triggerDataList.slice(-10);
}
this.addTimeDataCharts(data[i].children[j].children[n].children[m].triggerDataList, newValue);
}
}
}
@ -2827,12 +2832,14 @@ export default {
min: table.min,
originalSpeed: table.originalSpeed
};
// if (data[i].children[j].children[n].children[m].cycleTimeData.length > 10) {
// data[i].children[j].children[n].children[m].cycleTimeData =
// data[i].children[j].children[n].children[m].cycleTimeData.slice(-10);
// }
if (!data[i].children[j].children[n].children[m].cycleTimeData) {
data[i].children[j].children[n].children[m].cycleTimeData = [];
}
this.addTimeDataCharts(data[i].children[j].children[n].children[m].cycleTimeData, typeData);
} else {
if (!data[i].children[j].children[n].children[m].cycleTimeData) {
data[i].children[j].children[n].children[m].cycleTimeData = [];
}
if (data[i].children[j].children[n].children[m].cycleTimeData.length > 10) {
data[i].children[j].children[n].children[m].cycleTimeData =
data[i].children[j].children[n].children[m].cycleTimeData.slice(-10);
@ -2898,12 +2905,14 @@ export default {
in_spd: table.in_spd,
out_spd: table.out_spd
};
// if (data[i].children[j].children[n].children[m].cycleStatisticsData.length > 10) {
// data[i].children[j].children[n].children[m].cycleStatisticsData =
// data[i].children[j].children[n].children[m].cycleStatisticsData.slice(-10);
// }
if (!data[i].children[j].children[n].children[m].cycleStatisticsData) {
data[i].children[j].children[n].children[m].cycleStatisticsData = [];
}
this.addTimeDataCharts(data[i].children[j].children[n].children[m].cycleStatisticsData, typeData);
} else {
if (!data[i].children[j].children[n].children[m].cycleStatisticsData) {
data[i].children[j].children[n].children[m].cycleStatisticsData = [];
}
if (data[i].children[j].children[n].children[m].cycleStatisticsData.length > 10) {
data[i].children[j].children[n].children[m].cycleStatisticsData =
data[i].children[j].children[n].children[m].cycleStatisticsData.slice(-10);
@ -2919,7 +2928,7 @@ export default {
},
//mqtt10()
addTimeDataCharts(array, newItem) {
if (array.length === 10) {
if (array && array.length === 10) {
array.pop(); //
}
array.unshift(newItem); //
@ -2967,26 +2976,34 @@ export default {
// if (locations == '' || locations == '') {
// if(locations == '' || locations == ''){
// console.log('trigger-', msgN[j].time);
// console.log('trigger-', msgN[j]);
//
this.addOrUpdateArrayItem(this.triggerDataList, {
time: msgN[j].time,
// this.addOrUpdateArrayItem(this.triggerDataList, {
// time: msgN[j].time,
// headway: msgN[j].headway,
// avg: msgN[j].avg,
// max: msgN[j].max,
// med: msgN[j].med,
// min: msgN[j].min
// });
// component_id: "d4633befe6d4415d8b2c16c61992fb27"
// graphical_id: "706baf89caa44920b6e84b0c46d10a29"
// video_id: "9bb7a16ddf924a08b3f5d37d71f86dbd"
// this.$nextTick(() => {
// this.upDataListByVideoIdAndCommentId(
// this.intersectionList,
// this.topicVideoIdList[i].videoId,
// msgN[j].component_id,
// this.triggerDataList
// );
// });
//
let carTou = {
headway: msgN[j].headway,
avg: msgN[j].avg,
max: msgN[j].max,
med: msgN[j].med,
min: msgN[j].min
});
this.$nextTick(() => {
this.upDataListByVideoIdAndCommentId(
this.intersectionList,
this.topicVideoIdList[i].videoId,
msgN[j].component_id,
this.triggerDataList
);
});
//
let carTou = {
min: msgN[j].min,
name: msgN[j].name,
time: msgN[j].time,
type: msgN[j].type,
@ -3033,19 +3050,19 @@ export default {
} else if (msgN[j].component_type == '流量') {
// console.log('trigger-', msgN[j]);
//
this.addOrUpdateArrayItem(this.triggerFlowData, {
time: msgN[j].time,
in_flow: msgN[j].in_flow,
out_flow: msgN[j].out_flow
});
this.$nextTick(() => {
this.upDataListByVideoIdAndCommentId(
this.intersectionList,
this.topicVideoIdList[i].videoId,
msgN[j].component_id,
this.triggerFlowData
);
});
// this.addOrUpdateArrayItem(this.triggerFlowData, {
// time: msgN[j].time,
// in_flow: msgN[j].in_flow,
// out_flow: msgN[j].out_flow
// });
// this.$nextTick(() => {
// this.upDataListByVideoIdAndCommentId(
// this.intersectionList,
// this.topicVideoIdList[i].videoId,
// msgN[j].component_id,
// this.triggerFlowData
// );
// });
//
let flowMap = {
inFlow: msgN[j].in_flow,
@ -3062,6 +3079,8 @@ export default {
});
//
let carTou = {
in_flow: msgN[j].in_flow,
out_flow: msgN[j].out_flow,
name: msgN[j].name,
time: msgN[j].time,
type: msgN[j].type,
@ -3105,25 +3124,29 @@ export default {
);
});
//
this.addOrUpdateArrayItem(this.triggerSpeedData, {
time: msgN[j].time,
speed: newSpeed,
originalSpeed: msgN[j].speed,
// this.addOrUpdateArrayItem(this.triggerSpeedData, {
// time: msgN[j].time,
// speed: newSpeed,
// originalSpeed: msgN[j].speed,
// avg: msgN[j].avg,
// max: msgN[j].max,
// med: msgN[j].med,
// min: msgN[j].min
// });
// this.$nextTick(() => {
// this.upDataListByVideoIdAndCommentId(
// this.intersectionList,
// this.topicVideoIdList[i].videoId,
// msgN[j].component_id,
// this.triggerSpeedData
// );
// });
//
let carTou = {
avg: msgN[j].avg,
max: msgN[j].max,
med: msgN[j].med,
min: msgN[j].min
});
this.$nextTick(() => {
this.upDataListByVideoIdAndCommentId(
this.intersectionList,
this.topicVideoIdList[i].videoId,
msgN[j].component_id,
this.triggerSpeedData
);
});
//
let carTou = {
min: msgN[j].min,
name: msgN[j].name,
time: msgN[j].time,
type: msgN[j].type,
@ -3169,24 +3192,24 @@ export default {
});
//
// this.triggerTypeData = msgN[j].type_data;
this.triggerTypeData = [
{
type_data: msgN[j].type_data,
time: msgN[j].time
}
];
// this.triggerTypeData = [
// {
// type_data: msgN[j].type_data,
// time: msgN[j].time
// }
// ];
// this.addOrUpdateArrayItem(this.triggerTypeData, {
// type_data: msgN[j].type_data,
// time: msgN[j].time,
// });
this.$nextTick(() => {
this.upDataListByVideoIdAndCommentId(
this.intersectionList,
this.topicVideoIdList[i].videoId,
msgN[j].component_id,
this.triggerTypeData
);
});
// this.$nextTick(() => {
// this.upDataListByVideoIdAndCommentId(
// this.intersectionList,
// this.topicVideoIdList[i].videoId,
// msgN[j].component_id,
// this.triggerTypeData
// );
// });
//
let carTou = {
name: msgN[j].name,
@ -3235,24 +3258,28 @@ export default {
);
});
//
this.addOrUpdateArrayItem(this.triggerNStayData, {
time: msgN[j].time,
n_stay: msgN[j].n_stay,
// this.addOrUpdateArrayItem(this.triggerNStayData, {
// time: msgN[j].time,
// n_stay: msgN[j].n_stay,
// avg: msgN[j].avg,
// max: msgN[j].max,
// med: msgN[j].med,
// min: msgN[j].min
// });
// this.$nextTick(() => {
// this.upDataListByVideoIdAndCommentId(
// this.intersectionList,
// this.topicVideoIdList[i].videoId,
// msgN[j].component_id,
// this.triggerNStayData
// );
// });
//
let carTou = {
avg: msgN[j].avg,
max: msgN[j].max,
med: msgN[j].med,
min: msgN[j].min
});
this.$nextTick(() => {
this.upDataListByVideoIdAndCommentId(
this.intersectionList,
this.topicVideoIdList[i].videoId,
msgN[j].component_id,
this.triggerNStayData
);
});
//
let carTou = {
min: msgN[j].min,
name: msgN[j].name,
time: msgN[j].time,
type: msgN[j].type,
@ -3295,18 +3322,18 @@ export default {
);
});
//
this.addOrUpdateArrayItem(this.triggerNQueueData, {
time: msgN[j].time,
n_queue: msgN[j].n_queue
});
this.$nextTick(() => {
this.upDataListByVideoIdAndCommentId(
this.intersectionList,
this.topicVideoIdList[i].videoId,
msgN[j].component_id,
this.triggerNQueueData
);
});
// this.addOrUpdateArrayItem(this.triggerNQueueData, {
// time: msgN[j].time,
// n_queue: msgN[j].n_queue
// });
// this.$nextTick(() => {
// this.upDataListByVideoIdAndCommentId(
// this.intersectionList,
// this.topicVideoIdList[i].videoId,
// msgN[j].component_id,
// this.triggerNQueueData
// );
// });
//
let carTou = {
name: msgN[j].name,
@ -3339,15 +3366,26 @@ export default {
// });
} else if (msgN[j].component_type == 'OD') {
// - TODO
this.addOrUpdateArrayItem(this.triggerODData, {
// this.addOrUpdateArrayItem(this.triggerODData, {
// ob_data: msgN[j].ob_data
// });
// this.$nextTick(() => {
// this.upDataListByVideoIdAndCommentId(
// this.intersectionList,
// this.topicVideoIdList[i].videoId,
// msgN[j].component_id,
// this.triggerODData
// );
// });
let carTou = {
ob_data: msgN[j].ob_data
});
};
this.$nextTick(() => {
this.upDataListByVideoIdAndCommentId(
this.triggerDataCharts(
this.intersectionList,
this.topicVideoIdList[i].videoId,
msgN[j].component_id,
this.triggerODData
carTou
);
});
}
@ -4197,50 +4235,65 @@ export default {
box-sizing: border-box;
padding: 0 3%;
}
.echartsList {
.echartList {
width: 100%;
height: calc(100% - 17%);
.echarts0 {
position: absolute;
width: 440px;
height: 282px;
z-index: 999;
}
.echarts1 {
position: absolute;
width: 440px;
height: 282px;
}
.echarts2 {
position: absolute;
width: 440px;
height: 282px;
}
.echarts3 {
position: absolute;
width: 440px;
height: 282px;
}
.echarts4 {
position: absolute;
width: 440px;
height: 282px;
}
.echarts5 {
position: absolute;
width: 440px;
height: 282px;
}
.echarts6 {
position: absolute;
width: 440px;
height: 282px;
}
.echarts7 {
& > div {
position: absolute;
width: 440px;
height: 282px;
}
// .echarts0 {
// position: absolute;
// width: 440px;
// height: 282px;
// z-index: 999;
// }
// .echarts1 {
// position: absolute;
// width: 440px;
// height: 282px;
// }
// .echarts2 {
// position: absolute;
// width: 440px;
// height: 282px;
// }
// .echarts3 {
// position: absolute;
// width: 440px;
// height: 282px;
// }
// .echarts4 {
// position: absolute;
// width: 440px;
// height: 282px;
// }
// .echarts5 {
// position: absolute;
// width: 440px;
// height: 282px;
// }
// .echarts6 {
// position: absolute;
// width: 440px;
// height: 282px;
// }
// .echarts7 {
// position: absolute;
// width: 440px;
// height: 282px;
// }
// .echarts8 {
// position: absolute;
// width: 440px;
// height: 282px;
// }
// .echarts9 {
// position: absolute;
// width: 440px;
// height: 282px;
// }
}
// .echarts {
// width: 100%;