增加了dev和pro 不需要在开发时候切换ip了,打包不影响
This commit is contained in:
parent
206fec9c18
commit
50b57d731b
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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: '',
|
||||
|
|
|
@ -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: '',
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
})
|
||||
|
|
|
@ -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: [
|
||||
{
|
||||
|
|
|
@ -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: [
|
||||
{
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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`,
|
||||
|
||||
};
|
|
@ -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('连接成功')
|
||||
|
|
|
@ -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 ''
|
||||
}
|
|
@ -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
|
@ -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/'; // 一个测试用url,改成给的,ws://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, // 心跳时间,默认60s,设置为0禁用
|
||||
username: 'admin', // 用户名(可选)
|
||||
password: '123456', // 密码(可选)
|
||||
clientId: clientId, // 客户端ID,默认随机生成
|
||||
protocolId: "MQTT",
|
||||
protocolVersion: 4,
|
||||
clean: true, // false在离线时接收QoS1和2的消息
|
||||
reconnectPeriod: 2000, // 重连间隔,默认1000毫秒
|
||||
connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
|
||||
will: {
|
||||
// 遗嘱消息(客户端严重断开连接时Broker将自动发送的消息)
|
||||
topic: "img1", // 要发布的主题
|
||||
payload: "[MQTT-TEST] 遗嘱消息:连接异常断开!", // 要发布的消息
|
||||
qos: 0, // QoS(Quality of Service),QoS0:只负责发,QoS1:保证消息至少送达1次,QoS2:保证消息到且仅到1次
|
||||
retain: false, // 保留标志
|
||||
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/'; // 一个测试用url,改成给的,ws://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) //msg为转换后的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("img2") != -1) {
|
||||
try {
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据
|
||||
console.log("msg", msg) //msg为转换后的JSON数据
|
||||
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) //msg为转换后的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("img4") != -1) {
|
||||
try {
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据
|
||||
console.log("msg", msg) //msg为转换后的JSON数据
|
||||
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) //msg为转换后的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("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) //msg为转换后的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("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) //msg为转换后的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("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, // 心跳时间,默认60s,设置为0禁用
|
||||
username: 'admin', // 用户名(可选)
|
||||
password: '123456', // 密码(可选)
|
||||
clientId: clientId, // 客户端ID,默认随机生成
|
||||
protocolId: 'MQTT',
|
||||
protocolVersion: 4,
|
||||
clean: true, // false在离线时接收QoS1和2的消息
|
||||
reconnectPeriod: 2000, // 重连间隔,默认1000毫秒
|
||||
connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
|
||||
will: {
|
||||
// 遗嘱消息(客户端严重断开连接时Broker将自动发送的消息)
|
||||
topic: 'img1', // 要发布的主题
|
||||
payload: '[MQTT-TEST] 遗嘱消息:连接异常断开!', // 要发布的消息
|
||||
qos: 0, // QoS(Quality of Service),QoS0:只负责发,QoS1:保证消息至少送达1次,QoS2:保证消息到且仅到1次
|
||||
retain: false // 保留标志
|
||||
}
|
||||
};
|
||||
if (this.mqttClient == undefined) {
|
||||
this.mqttClient = mqtt.connect(host, options); // 连接
|
||||
// const client = mqtt.connect(host, options); // 连接
|
||||
// const client = mqtt.connect(host) // 连接
|
||||
// 错误回调
|
||||
// console.log("this.mqttClient", this.mqttClient)
|
||||
this.mqttClient.on('error', (err) => {
|
||||
console.log('[MQTT-TEST] 连接错误:', err);
|
||||
this.mqttClient.end();
|
||||
});
|
||||
// 重连回调
|
||||
this.mqttClient.on('reconnect', (reconnect) => {
|
||||
// console.log("[MQTT-TEST] 重连中……", reconnect);
|
||||
});
|
||||
// 连接回调
|
||||
this.mqttClient.on('connect', (connect) => {
|
||||
// console.log("[MQTT-TEST] 已连接的客户端ID: ", connect);
|
||||
// 订阅
|
||||
this.mqttClient.subscribe('img0', { qos: 0 });
|
||||
this.mqttClient.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) //msg为转换后的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('img2') != -1) {
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据
|
||||
console.log('msg', msg); //msg为转换后的JSON数据
|
||||
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); //msg为转换后的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('img4') != -1) {
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据
|
||||
console.log('msg', msg); //msg为转换后的JSON数据
|
||||
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); //msg为转换后的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('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); //msg为转换后的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('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); //msg为转换后的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('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>
|
|
@ -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("dataBoard实时触发triggerListData-item",item)
|
||||
// }
|
||||
ele.trigger.unshift(item);
|
||||
_this.$nextTick(() => {
|
||||
if (_this.$refs.typeChartRef != undefined) {
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -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: '确定',
|
||||
|
|
|
@ -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
|
@ -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 {
|
|||
},
|
||||
//mqtt接收数据添加最新的最多添加10条(固定时刻)
|
||||
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%;
|
||||
|
|
Loading…
Reference in New Issue