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

2023022104

This commit is contained in:
chengdandan 2023-02-21 20:18:33 +08:00
parent 859c896170 0f21d85439
commit e3a50535e4
15 changed files with 721 additions and 619 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

13
src/api/management.js Normal file
View File

@ -0,0 +1,13 @@
import axios from 'axios';
import qs from 'qs';
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = '/';
} else if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = '/';
}
//获取所有账号数据接口
export const getZhanghData = params => {
return axios.get('api/GetZhangh', {
params
});
};

140
src/components/chart/avgChart.vue
View File

@ -1,5 +1,15 @@
<template> <template>
<div style="width: 100%;margin-top: 5px;">
<div class="tableTitle">
<div>
<span
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
></span>
<span style="font-size:18px;">{{ componentName + '-' + chartName + '-' + '均值图' }}</span>
</div>
</div>
<div id="barChart" ref="barChart" style="width: 100%; height: 300px"></div> <div id="barChart" ref="barChart" style="width: 100%; height: 300px"></div>
</div>
</template> </template>
<script> <script>
@ -10,10 +20,17 @@ export default {
type: Array, type: Array,
default() { default() {
return []; return [];
}, }
}, },
typeValue: { typeValue: {
type:Object, type: Object
},
// 组件名称
componentName: {
type: String
},
chartName: {
type: String
} }
}, },
data() { data() {
@ -21,23 +38,14 @@ export default {
}, },
methods: { methods: {
drawBar(arr) { drawBar(arr) {
let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart) let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
if (myChart == null) { if (myChart == null) {
myChart = this.$echarts.init(this.$refs.barChart) myChart = this.$echarts.init(this.$refs.barChart);
} }
let chartData = [{ stage: '值', number: 40 }]; let chartData = [{ stage: '', number: 40 }];
let option = { let option = {
tooltip: {},
color: ['#0EECE4'], color: ['#0EECE4'],
tooltip: {
// trigger: 'axis',
confine: true
// axisPointer: { // 坐标轴指示器，坐标轴触发有效
// type: 'line', // 默认为直线，可选为：'line' | 'shadow'
// lineStyle: {
// color: 'transparent',
// },
// },
},
grid: { grid: {
left: '0%', left: '0%',
right: '0%', right: '0%',
@ -49,7 +57,7 @@ export default {
{ {
type: 'category', type: 'category',
gridIndex: 0, gridIndex: 0,
data: chartData.map((item) => item.stage), data: chartData.map(item => item.stage),
axisLine: { axisLine: {
show: false show: false
}, },
@ -79,6 +87,24 @@ export default {
max: 200 max: 200
}, },
series: [ series: [
{
name: '外框',
type: 'bar',
barGap: '-120%', // 设置外框粗细
data: [300],
barWidth: 150,
itemStyle: {
normal: {
color: 'rgba(0,0,0,.1)', // 填充色
barBorderWidth: 1, // 边框宽度
label: {
// 标签显示位置
show: false
}
}
},
z: 1
},
{ {
name: '平均值', name: '平均值',
type: 'bar', type: 'bar',
@ -89,90 +115,88 @@ export default {
label: { label: {
show: true, show: true,
position: 'right', position: 'right',
// align: 'right', // offset: [10, 20],
distance: 15, distance: 15,
color: '#000', color: '#000',
fontSize: 17, fontSize: 17,
formatter: '{c}' + '[avg]' formatter: '{c}' + '[avg]'
}, },
itemStyle: { itemStyle: {
color: '#DF8414' color: '#89c6ff'
}, },
data: [10], data: [arr.avg],
zlevel: 11 zlevel: 9
}, },
{ {
name: '中间值', name: '中间值',
type: 'bar', type: 'bar',
barWidth: 150, barWidth: 150,
// xAxisIndex: 0,
// yAxisIndex: 0,
stack: 'val', stack: 'val',
label: { label: {
show: true, show: true,
position: 'left', position: 'left',
distance: 15, distance: 15,
color: '#000', color: '#000',
// align: 'left',
fontSize: 17, fontSize: 17,
formatter: '{c}' + '[med]', formatter: '{c}' + '[med]',
rich: {} rich: {}
}, },
itemStyle: { itemStyle: {
color: '#0E76AF' color: '#67b4fd'
}, },
data: [30], data: [arr.med],
zlevel: 11 zlevel: 9
}, },
{ {
name: '最小值', name: '最大值',
type: 'bar', type: 'bar',
stack: 'val',
barWidth: 150, barWidth: 150,
barGap: '-100%', barGap: '-100%',
data: [20], data: [arr.max],
label: { label: {
show: true, show: true,
position: 'bottom', position: 'right',
distance: 10, distance: 10,
color: '#000', color: '#000',
fontSize: 17, fontSize: 17,
formatter: '{c}' + '[min]' offset: [0, -30],
}, formatter: '{c}' + '[max]'
tooltip: {
backgroundColor: 'transparent',
formatter: ' '
}, },
itemStyle: { itemStyle: {
color: '#ABA7A7' color: '#319cff'
}, },
zlevel: 9 zlevel: 9
}, },
{ {
name: '最大值', name: '最小值',
type: 'bar', type: 'bar',
stack: 'val',
barWidth: 150, barWidth: 150,
barGap: '-100%', barGap: '-100%',
data: [200], data: [arr.min],
label: { label: {
offset: [10, 20],
show: true, show: true,
position: 'top', position: 'left',
distance: 15, distance: 10,
color: '#000', color: '#000',
offset: [0, -30],
fontSize: 17, fontSize: 17,
formatter: '{c}' + '[max]' formatter: '{c}' + '[min]'
},
tooltip: {
backgroundColor: 'transparent',
formatter: ' '
}, },
// tooltip: {
// backgroundColor: 'transparent',
// formatter: ' '
// },
itemStyle: { itemStyle: {
color: '#ABA7A7' color: '#328adc'
}, },
zlevel: 9 zlevel: 9
} }
] ]
}; };
myChart.setOption(option); myChart.setOption(option);
window.addEventListener('resize', function() { window.addEventListener('resize', function() {
myChart.resize(); myChart.resize();
@ -180,16 +204,24 @@ export default {
} }
}, },
mounted() { mounted() {
this.drawBar() this.drawBar(this.typeValue);
}, },
watch: { watch: {
// typeValue: { typeValue: {
// handler(newVal) { handler(newVal) {
// if (newVal) { if (newVal) {
// this.drawBar(newVal); this.drawBar(newVal);
// } }
// } },
// } deep: true
}
} }
}; };
</script> </script>
<style>
.tableTitle {
background: #f7f8fa;
margin-bottom: 5px;
padding: 8px;
}
</style>

108
src/components/chart/barChart.vue
View File

@ -1,7 +1,15 @@
<template> <template>
<div style="width: 100%;margin-top: 5px;">
<div class="tableTitle">
<div>
<span
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
></span>
<span style="font-size:18px;">{{ componentName + '-' + chartName + '-' + '柱状图' }}</span>
</div>
</div>
<div id="barChart" ref="barChart" style="width:100%;height:300px;"></div> <div id="barChart" ref="barChart" style="width:100%;height:300px;"></div>
</div>
</template> </template>
<script> <script>
@ -10,7 +18,7 @@ export default {
props: { props: {
list: Array, list: Array,
default() { default() {
return [] return [];
}, },
pageType: { pageType: {
type: String type: String
@ -35,51 +43,42 @@ export default {
return { return {
xData: [], xData: [],
yData: [] yData: []
} };
},
created() {
}, },
created() {},
methods: { methods: {
drawBar() { drawBar() {
let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart)
if (myChart == null) { if (myChart == null) {
myChart = this.$echarts.init(this.$refs.barChart) myChart = this.$echarts.init(this.$refs.barChart);
} }
let option = { let option = {
color: ['#7262FD', '#FC5A5A'], color: ['#7262FD', '#FC5A5A'],
title:{
show:true,
text:this.componentName + '-' + this.chartName + '-' + '柱状图',
textStyle:{
lineHeight:'30',
}
},
tooltip: { tooltip: {
confine: true, confine: true
}, },
grid: { grid: {
left: '2%', left: '2%',
right: '4%', right: '4%',
bottom: '10%', bottom: '10%',
top: '20%', top: '20%',
containLabel: true, containLabel: true
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: this.xData, data: this.xData,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#000', color: '#000'
}, }
}, },
axisLabel: { axisLabel: {
fontSize: 12, fontSize: 12,
color: '#000', color: '#000'
}, },
axisTick: { axisTick: {
show: false, show: false
}, }
}, },
yAxis: [ yAxis: [
{ {
@ -87,64 +86,67 @@ export default {
min: 0, min: 0,
minInterval: 1, minInterval: 1,
splitArea: { splitArea: {
show: false, show: false
}, },
axisLine: { axisLine: {
show: true, show: true
}, },
axisTick: { axisTick: {
show: false, show: false
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: '#eeebeb', color: '#eeebeb',
type: 'dashed', // dotted 虚线 type: 'dashed' // dotted 虚线
}, }
}, },
axisLabel: { axisLabel: {
fontSize: 12, fontSize: 12,
color: '#000', color: '#000',
fontFamily: 'Bebas', fontFamily: 'Bebas'
}, }
}], }
series: [{ ],
series: [
{
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
itemStyle: { barBorderRadius: [5, 5, 0, 0], }, itemStyle: { barBorderRadius: [5, 5, 0, 0] },
name: '时间', name: '时间',
data: this.yData data: this.yData
},
],
};
myChart.setOption(option)
// window.onresize = () => { // 根据窗口大小变化图表自适应
// myChart.resize();
// };
window.addEventListener('resize', function () {
myChart.resize()
} }
) ]
}, };
myChart.setOption(option);
window.addEventListener('resize', function() {
myChart.resize();
});
}
}, },
mounted() { mounted() {
this.drawBar() this.xData = this.typeValue.type_data.map(ele => {
return ele.name;
});
this.yData = this.typeValue.type_data.map(ele => {
return ele.quantity;
});
this.drawBar();
}, },
watch: { watch: {
typeValue: { typeValue: {
handler(newVal) { handler(newVal) {
if (newVal) { if (newVal) {
this.xData = newVal.type_data.map(ele => { this.xData = newVal.type_data.map(ele => {
return ele.name return ele.name;
}) });
this.yData = newVal.type_data.map(ele => { this.yData = newVal.type_data.map(ele => {
return ele.quantity return ele.quantity;
}) });
this.drawBar() this.drawBar();
}
}
} }
} }
} }
}
};
</script> </script>

33
src/components/chart/lineChart.vue
View File

@ -1,5 +1,15 @@
<template> <template>
<div style="width: 100%;margin-top: 5px;">
<div class="tableTitle">
<div>
<span
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
></span>
<span style="font-size:18px;">{{this.componentName + '-' + this.chartName + '-' + '曲线图', }}</span>
</div>
</div>
<div id="lineChart" ref="lineChart" style="width: 100%; height: 300px"></div> <div id="lineChart" ref="lineChart" style="width: 100%; height: 300px"></div>
</div>
</template> </template>
<script> <script>
@ -41,7 +51,6 @@ export default {
return { return {
xData: [], xData: [],
yData: [], yData: [],
yData1: [], yData1: [],
yData2: [], yData2: [],
yData3: [], yData3: [],
@ -65,13 +74,13 @@ export default {
myChart = this.$echarts.init(this.$refs.lineChart); myChart = this.$echarts.init(this.$refs.lineChart);
} }
let option = { let option = {
title: { // title: {
show: true, // show: true,
text: this.componentName + '-' + this.chartName + '-' + '曲线图', // text: this.componentName + '-' + this.chartName + '-' + '曲线图',
textStyle: { // textStyle: {
lineHeight: '30' // lineHeight: '30'
} // }
}, // },
legend: {}, legend: {},
grid: { grid: {
left: '2%', left: '2%',
@ -282,4 +291,10 @@ export default {
} }
}; };
</script> </script>
<style scoped></style> <style scoped>
.tableTitle {
background: #f7f8fa;
margin-bottom: 5px;
padding: 8px;
}
</style>

112
src/components/chart/pieChart.vue
View File

@ -1,5 +1,15 @@
<template> <template>
<div style="width: 100%;margin-top: 5px;">
<div class="tableTitle">
<div>
<span
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
></span>
<span style="font-size:18px;">{{this.componentName + '-' + this.chartName + '-' + '饼状图', }}</span>
</div>
</div>
<div id="pieChart" ref="pieChart" style="width:100%;height:300px;"></div> <div id="pieChart" ref="pieChart" style="width:100%;height:300px;"></div>
</div>
</template> </template>
<script> <script>
@ -9,7 +19,7 @@ export default {
list: { list: {
type: Array, type: Array,
default() { default() {
return [] return [];
} }
}, },
componentName: { componentName: {
@ -21,10 +31,8 @@ export default {
typeValue: { typeValue: {
type: Object type: Object
} }
}, },
data() { data() {
return { return {
// 图例数据 // 图例数据
legend: [], legend: [],
@ -37,58 +45,52 @@ export default {
{ {
name: '非机动车', name: '非机动车',
value: 0 value: 0
}, { },
{
name: '行人', name: '行人',
value: 0 value: 0
} }
] ]
} };
},
created() {
}, },
created() {},
methods: { methods: {
drawPie() { drawPie() {
let myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart) let myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart);
if (myChart == null) { if (myChart == null) {
myChart = this.$echarts.init(this.$refs.pieChart) myChart = this.$echarts.init(this.$refs.pieChart);
} }
var color = [ var color = ['#0CD2E6', '#3751E6', '#FFC722'];
'#0CD2E6',
'#3751E6',
'#FFC722'
];
let option = { let option = {
title: { // title: {
show: true, // show: true,
text: this.componentName + '-' + this.chartName + '-' + '饼状图', // text: this.componentName + '-' + this.chartName + '-' + '饼状图',
textStyle: { // textStyle: {
lineHeight: '30', // lineHeight: '30'
} // }
}, // },
color: color, color: color,
legend: { legend: {
top: 20, top: 20,
right: 'center', right: 'center',
textStyle: { textStyle: {},
data: this.legend
},
data: this.legend,
}, },
tooltip: {}, tooltip: {},
series: [{ series: [
{
type: 'pie', type: 'pie',
center: ['50%', '55%'], center: ['50%', '55%'],
radius: '70%', radius: '70%',
label: { label: {
normal: { normal: {
show: false, show: false
}, }
}, },
labelLine: { labelLine: {
show: false, show: false,
length: 0, length: 0,
length2: 0, length2: 0
}, },
label: { label: {
normal: { normal: {
@ -98,51 +100,63 @@ export default {
rich: { rich: {
value: { value: {
fontSize: 20, fontSize: 20,
color: '#ffffff', color: '#ffffff'
}, }
}, }
} }
}, },
data: this.seriesData, data: this.seriesData
}], }
]
}; };
myChart.setOption(option) myChart.setOption(option);
// window.onresize = () => { // 根据窗口大小变化图表自适应 // window.onresize = () => { // 根据窗口大小变化图表自适应
// myChart.resize(); // myChart.resize();
// }; // };
window.addEventListener('resize', function() { window.addEventListener('resize', function() {
myChart.resize() myChart.resize();
});
} }
)
},
}, },
mounted() { mounted() {
if (this.typeValue) {
this.typeValue.type_data.forEach(ele => {
this.seriesData.push({
name: ele.name,
value: ele.quantity
});
});
this.drawPie(); this.drawPie();
}
}, },
watch: { watch: {
// 监听单个的数据
typeValue: { typeValue: {
handler(newVal) { handler(newVal) {
if (newVal) { if (newVal) {
this.legend = newVal.type_data.map(ele => { this.legend = newVal.type_data.map(ele => {
return ele.name return ele.name;
}); });
this.seriesData = [] this.seriesData = [];
newVal.type_data.forEach(ele => { newVal.type_data.forEach(ele => {
this.seriesData.push({ this.seriesData.push({
name: ele.name, name: ele.name,
value: ele.quantity value: ele.quantity
}) });
}) });
this.drawPie() // this.drawPie();
}
} }
} }
} }
} }
};
</script> </script>
<style scoped></style> <style scoped>
.tableTitle {
background: #f7f8fa;
margin-bottom: 5px;
padding: 8px;
}
</style>

111
src/components/target/typeChart.vue
View File

@ -1,15 +1,15 @@
<template><!-- 触发类型 --> <template
><!-- 触发类型 -->
<div class="setion" v-if="isRefer"> <div class="setion" v-if="isRefer">
<p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p> <p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p>
<!-- 触发数据数值渲染 --> <!-- 触发数据数值渲染 -->
<div class="typeContent" v-if="triggerType == '触发' || '周期时刻'"> <div class="typeContent" v-if="triggerType == '触发' || '周期时刻'">
<div v-if="dataArr && dataArr.length != 0"> <div v-if="dataArr && dataArr.length != 0">
<div v-if="title == '类型'" style="display:flex"> <div v-if="title == '类型'" style="display:flex">
<el-card v-for="(n, i) in typeValue.type_data" :key="i" <el-card v-for="(n, i) in typeValue.type_data" :key="i" style="width: 150px; margin-bottom: 20px; text-align: center">
style="width: 150px; margin-bottom: 20px; text-align: center">
<div> <div>
<span style="font-size: 15px;">{{ n.name }}</span><br /> <span style="font-size: 15px;">{{ n.name }}</span
><br />
<span style="font-size: 30px; font-weight: bold">{{ n.quantity }}</span> <span style="font-size: 30px; font-weight: bold">{{ n.quantity }}</span>
</div> </div>
<div> <div>
@ -34,27 +34,19 @@
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '流量'"> <div style="font-size: 30px; font-weight: bold" v-if="title == '流量'">
<span style="font-size: 15px;">流量</span><br /> <span style="font-size: 15px;">流量</span><br />
<span style="font-size: 30px; font-weight: bold">{{ <span style="font-size: 30px; font-weight: bold">{{ typeValue.flow }}</span>
typeValue.flow
}}</span>
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '车头时距'"> <div style="font-size: 30px; font-weight: bold" v-if="title == '车头时距'">
<span style="font-size: 15px;">车头时距</span><br /> <span style="font-size: 15px;">车头时距</span><br />
<span style="font-size: 30px; font-weight: bold">{{ <span style="font-size: 30px; font-weight: bold">{{ typeValue.heavy }}</span>
typeValue.heavy
}}</span>
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '排队数'"> <div style="font-size: 30px; font-weight: bold" v-if="title == '排队数'">
<span style="font-size: 15px;">排队数</span> <span style="font-size: 15px;">排队数</span>
<span style="font-size: 30px; font-weight: bold">{{ <span style="font-size: 30px; font-weight: bold">{{ typeValue.n_queue }}</span>
typeValue.n_queue
}}</span>
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '检测数'"> <div style="font-size: 30px; font-weight: bold" v-if="title == '检测数'">
<span style="font-size: 15px;">检测数</span> <span style="font-size: 15px;">检测数</span>
<span style="font-size: 30px; font-weight: bold">{{ <span style="font-size: 30px; font-weight: bold">{{ typeValue.n_stay }}</span>
typeValue.n_stay
}}</span>
</div> </div>
<div> <div>
<div> <div>
@ -66,15 +58,17 @@
<el-empty :image-size="100"></el-empty> <el-empty :image-size="100"></el-empty>
</div> </div>
</el-card> </el-card>
</div> </div>
<div v-show="echartArr.includes('表格')"> <div v-show="echartArr.includes('表格')">
<div class="tableTitle"> <div class="tableTitle">
<div class=""> <div>
<span
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
></span>
<span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' }}</span>
</div> </div>
<div class="tableTime"> <div class="tableTime">
{{ typeValue.time }}
</div> </div>
</div> </div>
<div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed"> <div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
@ -86,25 +80,53 @@
</div> </div>
<div class="border" v-if="echartArr.includes('曲线图')"> <div class="border" v-if="echartArr.includes('曲线图')">
<detailDialog /> <detailDialog />
<lineChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="dataArr" <lineChart
:status="triggerType" :title="title" :typeValue = typeValue /> :componentName="componentName"
:chartName="chartName"
:pageType="pageType"
:list="dataArr"
:status="triggerType"
:title="title"
:typeValue="typeValue"
/>
</div> </div>
<div class="border" v-if="echartArr.includes('饼状图')"> <div class="border" v-if="echartArr.includes('饼状图')">
<detailDialog /> <detailDialog />
<pieChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="dataArr" <pieChart
:status="triggerType" :title="title" :typeValue = typeValue /> :componentName="componentName"
:chartName="chartName"
:pageType="pageType"
:list="dataArr"
:status="triggerType"
:title="title"
:typeValue="typeValue"
/>
</div> </div>
<div class="border" v-if="echartArr.includes('均值图')"> <div class="border" v-if="echartArr.includes('均值图')">
<detailDialog /> <detailDialog />
<avgChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="dataArr" <avgChart
:status="triggerType" :title="title" :typeValue = typeValue /> ref="avgRefChart"
:componentName="componentName"
:chartName="chartName"
:pageType="pageType"
:list="dataArr"
:status="triggerType"
:title="title"
:typeValue="typeValue"
/>
</div> </div>
<div class="border" v-if="echartArr.includes('直方图')"> <div class="border" v-if="echartArr.includes('直方图')">
<detailDialog /> <detailDialog />
<barChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="dataArr" <barChart
:status="triggerType" :title="title" :typeValue = typeValue /> :componentName="componentName"
:chartName="chartName"
:pageType="pageType"
:list="dataArr"
:status="triggerType"
:title="title"
:typeValue="typeValue"
/>
</div> </div>
</div> </div>
</template> </template>
@ -141,40 +163,28 @@ export default {
valueShow: {} valueShow: {}
}; };
}, },
created() { created() {},
},
methods: { methods: {
// 计算类型的数值 // 计算类型的数值
}, },
computed: { computed: {},
},
mounted() {}, mounted() {},
watch: { watch: {
// 监听触发数据 // 监听触发数据
dataArr: { dataArr: {
handler(newVal) { handler(newVal) {},
},
immediate: true immediate: true
}, },
typeValue: { typeValue: {
handler(newVal) { handler(newVal) {
this.total = 0 this.total = 0;
if (this.title == '类型') { if (this.title == '类型') {
newVal.type_data.forEach(ele => { newVal.type_data.forEach(ele => {
this.total += ele.quantity this.total += ele.quantity;
}) });
} }
} }
} }
// cycleTimeData: { // cycleTimeData: {
@ -186,6 +196,11 @@ export default {
}; };
</script> </script>
<style scoped> <style scoped>
.tableTitle {
background: #f7f8fa;
margin-bottom: 5px;
padding: 8px;
}
.typeContent { .typeContent {
box-sizing: border-box; box-sizing: border-box;
} }

53
src/views/IdManagement.vue
View File

@ -2,32 +2,26 @@
<div class="content-box"> <div class="content-box">
<div class="container"> <div class="container">
<p class="title">账号管理</p> <p class="title">账号管理</p>
<!-- <div class="test-div"> <el-button @click="addAccountDialog = true" type="primary" style="margin-bottom: 10px;"
<i class="el-icon-edit"></i> ><i class="el-icon-circle-plus-outline" style="margin-right: 3px;"></i>新增</el-button
<i class="el-icon-share"></i> >
<i class="el-icon-delete"></i>
</div> -->
<el-button @click="addAccountDialog = true" type="primary" style="margin-bottom: 10px;"><i
class="el-icon-circle-plus-outline" style="margin-right: 3px;"></i>新增</el-button>
<el-table :data="tableData" :height="tableHeight" border style="width: 100%"> <el-table :data="tableData" :height="tableHeight" border style="width: 100%">
<el-table-column align="center" prop="name" label="用户名称" width="180"></el-table-column> <el-table-column align="center" prop="userName" label="用户名称" width="180"></el-table-column>
<el-table-column align="center" prop="account" label="用户账号" width="180"></el-table-column> <el-table-column align="center" prop="account" label="用户账号" width="180"></el-table-column>
<el-table-column align="center" prop="role" label="角色"></el-table-column> <el-table-column align="center" prop="roleName" label="角色"></el-table-column>
<el-table-column align="center" prop="jurisdiction" label="权限"></el-table-column> <el-table-column align="center" label="权限">
<template slot-scope="scope">
<span>{{ scope.row.isEnable === '1' ? '启用' : '禁用' }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="160"> <el-table-column align="center" label="操作" width="160">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button @click="edit(scope.row)" type="text" size="small" class="">编辑</el-button> <el-button @click="edit(scope.row)" type="text" size="small" class="">编辑</el-button>
<el-button @click="showView(scope.row)" type="text" size="small" class="el-icon-view"></el-button> <!-- <el-button @click="showView(scope.row)" type="text" size="small" class="el-icon-view"></el-button> -->
<el-button @click="clickDelete(scope.row)" type="text" size="small" class="el-icon-delete"></el-button> <el-button @click="clickDelete(scope.row)" type="text" size="small">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page.sync="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="pageSize"
layout="sizes, prev, pager, next" :total="totalNumber" style="padding-top: 10px;">
</el-pagination>
<div class="dialog"> <div class="dialog">
<el-dialog :title="dialogTitle" :visible.sync="addAccountDialog" width="30%"> <el-dialog :title="dialogTitle" :visible.sync="addAccountDialog" width="30%">
<el-form label-position="left" label-width="80px" :model="formLabelAlign"> <el-form label-position="left" label-width="80px" :model="formLabelAlign">
@ -54,6 +48,7 @@
</template> </template>
<script> <script>
import { getZhanghData } from '@/api/management';
export default { export default {
data() { data() {
return { return {
@ -64,27 +59,27 @@ export default {
role: '', role: '',
jurisdiction: '' jurisdiction: ''
}, },
tableData: [ tableData: [],
{
name: 'admin',
account: '',
role: 'admin',
jurisdiction: '超级管理员'
}
],
tableHeight: 0, tableHeight: 0,
currentPage: 1, currentPage: 1,
pageSize: 100, pageSize: 100,
totalNumber: 1000, totalNumber: 1000,
tableHeight: 0, tableHeight: 0,
dialogTitle: '新增' dialogTitle: '新增'
} };
}, },
created() { created() {
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
this.tableHeight = windowHeight - 220; this.tableHeight = windowHeight - 280;
this.getData();
}, },
methods: { methods: {
getData() {
getZhanghData().then(res => {
console.log(res);
this.tableData = res.data.data;
});
},
edit(scope) { edit(scope) {
console.log(scope, '编辑'); console.log(scope, '编辑');
this.dialogTitle = '编辑'; this.dialogTitle = '编辑';
@ -105,7 +100,7 @@ export default {
console.log(`当前页: ${val}`); console.log(`当前页: ${val}`);
} }
} }
} };
</script> </script>
<style scoped> <style scoped>

129
src/views/bounced/dataBoard.vue
View File

@ -3,11 +3,15 @@
<el-empty v-show="componentList.length == 0" :image-size="400"></el-empty> <el-empty v-show="componentList.length == 0" :image-size="400"></el-empty>
<!-- <p class="title" style="margin-bottom: 20px;font-size: 20px;font-weight: 400;">数据看板</p> --> <!-- <p class="title" style="margin-bottom: 20px;font-size: 20px;font-weight: 400;">数据看板</p> -->
<el-scrollbar class="scrollbar"> <el-scrollbar class="scrollbar">
<div class="dataBoard" ref='dataBoard' v-if="activeName == 'second'"> <div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'">
<!-- 断面 --> <!-- 断面 -->
<div class="plate1" ref="plate1"> <div class="plate1" ref="plate1">
<div :class="sectionData.length <= 2 ? 'sectionBox' : 'section'" ref="section" <div
v-for="(s, i) in sectionData" :key="s.analogAreaComponentId"> :class="sectionData.length <= 2 ? 'sectionBox' : 'section'"
ref="section"
v-for="(s, i) in sectionData"
:key="s.analogAreaComponentId"
>
<template> <template>
<div ref="sectionContent"> <div ref="sectionContent">
<div> <div>
@ -17,17 +21,27 @@
<span class="downPull1" data-num="1" @click="sectionHandle(i)"></span> <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span>
</div> </div>
<div v-for="o in s.children" :key="o.analogAreaComponentId"> <div v-for="o in s.children" :key="o.analogAreaComponentId">
<OD
<OD v-if="o.componentName.includes('OD')" :pageType="o.graphicType" triggerType="触发" v-if="o.componentName.includes('OD')"
:componentName="o.componentName" :echartArr="o.presentationForm" :pageType="o.graphicType"
:dataArr="o.trigger" :title="o.componentName.split('_')[0]" triggerType="触发"
:chartName='o.combinationName' /> :componentName="o.componentName"
<typeChart v-else :pageType="o.graphicType" :triggerType="o.timeMode" :echartArr="o.presentationForm"
:dataArr="o.trigger"
:title="o.componentName.split('_')[0]"
:chartName="o.combinationName"
/>
<typeChart
v-else
:pageType="o.graphicType"
:triggerType="o.timeMode"
:componentName="o.componentName" :componentName="o.componentName"
:dataArr="o.timeMode == '触发' ? o.trigger : o.cycleTimeData" :dataArr="o.timeMode == '触发' ? o.trigger : o.cycleTimeData"
:echartArr="o.presentationForm" :title="o.componentName.split('_')[0]" :echartArr="o.presentationForm"
:chartName='o.combinationName' :title="o.componentName.split('_')[0]"
:typeValue="o.timeMode == '触发' ? typeValue : typeCycleTimeData" /> :chartName="o.combinationName"
:typeValue="o.timeMode == '触发' ? typeValue : typeCycleTimeData"
/>
</div> </div>
<!-- :data="triggerList.length != 0 ? triggerList : tableData" --> <!-- :data="triggerList.length != 0 ? triggerList : tableData" -->
</div> </div>
@ -80,7 +94,7 @@ export default {
default() { default() {
return []; return [];
} }
}, }
}, },
data() { data() {
return { return {
@ -302,8 +316,6 @@ export default {
} }
], ],
idVal: '', idVal: '',
//组件数组 //组件数组
componentList: [], componentList: [],
@ -312,16 +324,12 @@ export default {
sectionData: [], sectionData: [],
// 单个区域或者断面的表格触发数据 // 单个区域或者断面的表格触发数据
tableList: [], tableList: [],
// 路线数据 // 路线数据
headWay: [], headWay: [],
tripData: [], tripData: [],
sectionArr: [], sectionArr: [],
@ -334,11 +342,11 @@ export default {
}, },
created() { created() {
this.idVal = this.$route.query.id; this.idVal = this.$route.query.id;
getComponentSection({ VideoId: this.idVal }).then((res) => { getComponentSection({ VideoId: this.idVal }).then(res => {
if (res.data.code == 200) { if (res.data.code == 200) {
console.log(res.data.data, '11111111111111111'); console.log(res.data.data, '11111111111111111');
this.componentList = res.data.data this.componentList = res.data.data;
this.siftData() this.siftData();
// 处理获取过来的数据 // 处理获取过来的数据
// this.componentList.forEach((val) => { // this.componentList.forEach((val) => {
// this.sectionArr.push(val.combinationName); // this.sectionArr.push(val.combinationName);
@ -357,18 +365,16 @@ export default {
} else if (res.data.code == 404) { } else if (res.data.code == 404) {
} }
}); });
}, },
methods: { methods: {
siftData() { siftData() {
this.componentList.forEach((val) => { this.componentList.forEach(val => {
this.sectionArr.push(val.combinationName); this.sectionArr.push(val.combinationName);
this.sectionArr = Array.from(new Set(this.sectionArr)); this.sectionArr = Array.from(new Set(this.sectionArr));
}); });
this.sectionData = this.sectionArr.map((item) => { this.sectionData = this.sectionArr.map(item => {
item = { title: item, children: [] }; item = { title: item, children: [] };
this.componentList.forEach((val) => { this.componentList.forEach(val => {
if (item.title == val.combinationName) { if (item.title == val.combinationName) {
item.children.push(val); item.children.push(val);
} }
@ -390,60 +396,46 @@ export default {
if (sectionBox[i] != undefined) { if (sectionBox[i] != undefined) {
sectionBox[i].style.height = 'auto'; sectionBox[i].style.height = 'auto';
} }
} else { } else {
downPulls1[i].style.cssText = 'transition: all 0.5s linear;'; downPulls1[i].style.cssText = 'transition: all 0.5s linear;';
sections[i].style.height = '500px'; sections[i].style.height = '500px';
if (sectionBox[i] != undefined) { if (sectionBox[i] != undefined) {
sectionBox[i].style.height = '48vh' sectionBox[i].style.height = '48vh';
}
} }
} }
},
// 触发数据的类型数值 // 触发数据的类型数值
},
mounted() {
}, },
mounted() {},
watch: { watch: {
// 触发的原始数据 // 触发的原始数据
triggerData: { triggerData: {
handler(newVal, oldVal) { handler(newVal, oldVal) {},
},
immediate: true immediate: true
}, },
// 处理过的触发数据 // 处理过的触发数据
triggerListData: { triggerListData: {
handler(newVal) { handler(newVal) {
this.triggerList = newVal this.triggerList = newVal;
// 触发数据
console.log(newVal, 'triggerlistData');
this.componentList.forEach(ele => { this.componentList.forEach(ele => {
if (ele.trigger == undefined && ele.timeMode == '触发') { if (ele.trigger == undefined && ele.timeMode == '触发') {
ele.trigger = [] ele.trigger = [];
} }
newVal.forEach(item => { newVal.forEach(item => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') { if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {
if (ele.trigger.length == 10) { if (ele.trigger.length == 10) {
ele.trigger.pop() ele.trigger.pop();
} else { } else {
// 该时间的触发数据 // 该时间的触发数据
if (item.type_data != null) { this.typeValue = item;
// console.log(item,'461461');
this.typeValue = item ele.trigger.unshift(item);
}
ele.trigger.unshift(item)
} }
} }
}) });
}) });
}, },
immediate: true immediate: true
}, },
@ -455,22 +447,26 @@ export default {
if (newVal.length != 0) { if (newVal.length != 0) {
this.componentList.forEach(ele => { this.componentList.forEach(ele => {
if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') { if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
ele.cycleTimeData = [] ele.cycleTimeData = [];
} }
newVal.forEach(item => { newVal.forEach(item => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻' && ele.analogAreaGraphId == item.graphical_id) { if (
ele.analogAreaComponentId == item.component_id &&
ele.timeMode == '周期时刻' &&
ele.analogAreaGraphId == item.graphical_id
) {
if (ele.cycleTimeData.length == 10) { if (ele.cycleTimeData.length == 10) {
ele.cycleTimeData.slice(ele.cycleTimeData.length-1,0) ele.cycleTimeData.slice(ele.cycleTimeData.length - 1, 0);
} else { } else {
if(item.type_data!=null){ // if (item.type_data != null) {
// 周期时刻的类型数据 // 周期时刻的类型数据
this.typeCycleTimeData = item this.typeCycleTimeData = item;
} // }
ele.cycleTimeData.unshift(item) ele.cycleTimeData.unshift(item);
} }
} }
}) });
}) });
console.log(this.sectionData, '455'); console.log(this.sectionData, '455');
} }
}, },
@ -482,11 +478,7 @@ export default {
console.log(newVal, '周期统计'); console.log(newVal, '周期统计');
} }
} }
}
},
}; };
</script> </script>
@ -506,7 +498,7 @@ export default {
/deep/ .el-scrollbar__view { /deep/ .el-scrollbar__view {
display: inline-block !important; display: inline-block !important;
width: 100% width: 100%;
} }
/deep/ .el-scrollbar__wrap { /deep/ .el-scrollbar__wrap {
@ -520,7 +512,6 @@ export default {
.dataBoard { .dataBoard {
height: 100%; height: 100%;
} }
} }
.dataBoard .region, .dataBoard .region,

159
src/views/index.vue
View File

@ -15,12 +15,17 @@
v-if="videoUnityShow" v-if="videoUnityShow"
></iframe> ></iframe>
<!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none" ref="iframe"></iframe> --> <!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none" ref="iframe"></iframe> -->
<el-empty :description="description" v-if="videoAnalysisShow"> <el-empty :description="description" v-if="videoAnalysisShow"> </el-empty>
</el-empty>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="数据看板" name="second"> <el-tab-pane label="数据看板" name="second">
<dataBoard :activeName="activeName" :triggerData="triggerData" :triggerListData="triggerListData" :cycleTimeData='cycleTimeData' :cycleStatistics='cycleStatistics'></dataBoard> <dataBoard
:activeName="activeName"
:triggerData="triggerData"
:triggerListData="triggerListData"
:cycleTimeData="cycleTimeData"
:cycleStatistics="cycleStatistics"
></dataBoard>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="分析配置" name="third"> <el-tab-pane label="分析配置" name="third">
<analysisConfiguration :analysisConfigurationdata="analysisConfigurationdata"></analysisConfiguration> <analysisConfiguration :analysisConfigurationdata="analysisConfigurationdata"></analysisConfiguration>
@ -32,8 +37,16 @@
</el-tabs> </el-tabs>
<!-- <el-button class="videoAnalysis" type="primary" size="mini" @click="videoAnalysisBtn" v-if="videoAnalysisShow" :disabled='disabledVideoAnalysis' <!-- <el-button class="videoAnalysis" type="primary" size="mini" @click="videoAnalysisBtn" v-if="videoAnalysisShow" :disabled='disabledVideoAnalysis'
>视频分析</el-button> --> >视频分析</el-button> -->
<el-button class="trafficAnalysis" type="primary" plain size="mini" @click="trafficAnalysisBtn" v-if="trafficAnalysisShow" :disabled='disabledTrafficAnalysis' <el-button
>交通分析</el-button> class="trafficAnalysis"
type="primary"
plain
size="mini"
@click="trafficAnalysisBtn"
v-if="trafficAnalysisShow"
:disabled="disabledTrafficAnalysis"
>交通分析</el-button
>
</div> </div>
<el-drawer <el-drawer
class="new-dialog" class="new-dialog"
@ -80,7 +93,14 @@
<el-checkbox v-for="item in typeData" :label="item" :key="item">{{ item }}</el-checkbox> <el-checkbox v-for="item in typeData" :label="item" :key="item">{{ item }}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
<el-form-item label="数值筛选：" v-if="componentForm.componentType != 'OD' &&componentForm.componentType != '类型'&&componentForm.componentType != '流量'"> <el-form-item
label="数值筛选："
v-if="
componentForm.componentType != 'OD' &&
componentForm.componentType != '类型' &&
componentForm.componentType != '流量'
"
>
<el-input-number v-model="componentForm.startValue"></el-input-number> <el-input-number v-model="componentForm.startValue"></el-input-number>
<el-input-number v-model="componentForm.endValue" style="margin-left:5%"></el-input-number> <el-input-number v-model="componentForm.endValue" style="margin-left:5%"></el-input-number>
</el-form-item> </el-form-item>
@ -92,7 +112,11 @@
</el-form-item> </el-form-item>
<el-form-item label="时间模式："> <el-form-item label="时间模式：">
<el-select v-model="componentForm.timeMode" placeholder="请选择时间模式"> <el-select v-model="componentForm.timeMode" placeholder="请选择时间模式">
<el-option label="触发" value="触发" v-if="componentForm.componentType != '延误'&&componentForm.componentType != '拥堵'"></el-option> <el-option
label="触发"
value="触发"
v-if="componentForm.componentType != '延误' && componentForm.componentType != '拥堵'"
></el-option>
<el-option <el-option
label="周期时刻" label="周期时刻"
value="周期时刻" value="周期时刻"
@ -102,9 +126,9 @@
componentForm.componentType != '延误' && componentForm.componentType != '延误' &&
componentForm.componentType != '拥堵' && componentForm.componentType != '拥堵' &&
componentForm.componentType != '流量' componentForm.componentType != '流量'
"></el-option> "
<el-option label="周期统计" value="周期统计" v-if="componentForm.componentType != 'OD'"> ></el-option>
</el-option> <el-option label="周期统计" value="周期统计" v-if="componentForm.componentType != 'OD'"> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- <el-form-item label="触发类型：" v-if="componentForm.timeModel=='touch'"> <!-- <el-form-item label="触发类型：" v-if="componentForm.timeModel=='touch'">
@ -120,10 +144,7 @@
<el-select v-model="componentForm.company" placeholder="请选择单位" @change="changeCompany"> <el-select v-model="componentForm.company" placeholder="请选择单位" @change="changeCompany">
<!-- <el-option v-for="item in timeSelect" :key="item.value" :label="item.label" :value="item.value"></el-option> --> <!-- <el-option v-for="item in timeSelect" :key="item.value" :label="item.label" :value="item.value"></el-option> -->
<el-option label="秒" value="秒" v-if="componentForm.timeMode != '周期统计'"></el-option> <el-option label="秒" value="秒" v-if="componentForm.timeMode != '周期统计'"></el-option>
<el-option <el-option label="分钟" value="分钟"></el-option>
label="分钟"
value="分钟"
></el-option>
<el-option label="小时" value="小时"></el-option> <el-option label="小时" value="小时"></el-option>
</el-select> </el-select>
<el-slider v-model="componentForm.cycleInterval" :max="max"> </el-slider> <el-slider v-model="componentForm.cycleInterval" :max="max"> </el-slider>
@ -277,7 +298,6 @@ export default {
typeFiltering: '', typeFiltering: '',
typeData: [], typeData: [],
FlowType: '出流' FlowType: '出流'
}, },
// typeData: ['小汽车', '公交车', '卡车', '非机动车', '行人'], // typeData: ['小汽车', '公交车', '卡车', '非机动车', '行人'],
typeData: ['机动车', '非机动车', '行人'], typeData: ['机动车', '非机动车', '行人'],
@ -390,7 +410,7 @@ export default {
} else if (this.$route.query.type == '离线视频') { } else if (this.$route.query.type == '离线视频') {
this.videoAnalysisShow = true; this.videoAnalysisShow = true;
this.trafficAnalysisShow = true; this.trafficAnalysisShow = true;
this.getAnalysisStatus() this.getAnalysisStatus();
// this.createMqtt(); // this.createMqtt();
// if(this.$route.query.status=='未分析'){ // if(this.$route.query.status=='未分析'){
// } // }
@ -400,14 +420,19 @@ export default {
// } // }
} }
}, },
mounted() { mounted() {},
},
methods: { methods: {
/** 创建mqtt */ /** 创建mqtt */
createMqtt() { createMqtt() {
//创建链接，接收数据 //创建链接，接收数据
this.topicSends = ['stream' + this.number, 'trajectory' + this.number, 'detection' + this.number,'trigger-'+ this.$route.query.id,'cycle_time-'+ this.$route.query.id,'cycle_statistics-'+ this.$route.query.id]; this.topicSends = [
'stream' + this.number,
'trajectory' + this.number,
'detection' + this.number,
'trigger-' + this.$route.query.id,
'cycle_time-' + this.$route.query.id,
'cycle_statistics-' + this.$route.query.id
];
window.PubScribe(this.topicSends, this.number, this.realInfo); window.PubScribe(this.topicSends, this.number, this.realInfo);
// mqtt = mqttConfig; // mqtt = mqttConfig;
/*mqtt = new mqttConfig(this.topicSends); /*mqtt = new mqttConfig(this.topicSends);
@ -438,32 +463,32 @@ export default {
//获取视频分析，交通分析状态数据 //获取视频分析，交通分析状态数据
getAnalysisStatus() { getAnalysisStatus() {
getVideoStatus(this.$route.query.id).then(res => { getVideoStatus(this.$route.query.id).then(res => {
console.log("res.data",res.data) console.log('res.data', res.data);
//视频分析状态 //视频分析状态
if (res.data.data.videoAnalysisStatus == '未分析') { if (res.data.data.videoAnalysisStatus == '未分析') {
this.disabledTrafficAnalysis= true this.disabledTrafficAnalysis = true;
this.videoUnityShow = true this.videoUnityShow = true;
this.analysisData() this.analysisData();
} else if (res.data.data.videoAnalysisStatus == '分析中') { } else if (res.data.data.videoAnalysisStatus == '分析中') {
this.disabledVideoAnalysis= true this.disabledVideoAnalysis = true;
this.videoUnityShow = false this.videoUnityShow = false;
setTimeout(() => { setTimeout(() => {
this.getAnalysisStatus() this.getAnalysisStatus();
}, 5000); }, 5000);
} else if (res.data.data.videoAnalysisStatus == '已分析') { } else if (res.data.data.videoAnalysisStatus == '已分析') {
this.videoUnityShow = true this.videoUnityShow = true;
this.videoAnalysisSta = res.data.data.videoAnalysisStatus this.videoAnalysisSta = res.data.data.videoAnalysisStatus;
this.disabledTrafficAnalysis= false this.disabledTrafficAnalysis = false;
this.analysisData() this.analysisData();
//交通分析状态 //交通分析状态
} else if (res.data.data.trafficAnalysisStatus == '未分析') { } else if (res.data.data.trafficAnalysisStatus == '未分析') {
this.disabledVideoAnalysis= true this.disabledVideoAnalysis = true;
} else if (res.data.data.trafficAnalysisStatus == '分析中') { } else if (res.data.data.trafficAnalysisStatus == '分析中') {
this.disabledVideoAnalysis= true this.disabledVideoAnalysis = true;
this.disabledTrafficAnalysis= true this.disabledTrafficAnalysis = true;
} else if (res.data.data.videoAnalysisStatus == '已分析' || res.data.data.trafficAnalysisStatus == '已分析') { } else if (res.data.data.videoAnalysisStatus == '已分析' || res.data.data.trafficAnalysisStatus == '已分析') {
this.disabledVideoAnalysis= false this.disabledVideoAnalysis = false;
this.disabledTrafficAnalysis= true this.disabledTrafficAnalysis = true;
} }
}); });
}, },
@ -477,7 +502,7 @@ export default {
type: 'success' type: 'success'
}); });
setTimeout(() => { setTimeout(() => {
this.getAnalysisStatus() this.getAnalysisStatus();
}, 5000); }, 5000);
// if(this.videoAnalysisSta=='已分析'){ // if(this.videoAnalysisSta=='已分析'){
@ -495,13 +520,13 @@ export default {
trafficAnalysisBtn() { trafficAnalysisBtn() {
startTrafficAnalysis(this.$route.query.id).then(res => { startTrafficAnalysis(this.$route.query.id).then(res => {
// //
console.log("res.data",res.data.data) console.log('res.data', res.data.data);
if (res.data.code == 200) { if (res.data.code == 200) {
this.$message({ this.$message({
message: res.data.msg, message: res.data.msg,
type: 'success' type: 'success'
}); });
document.getElementById('mapModule').contentWindow.addColor() document.getElementById('mapModule').contentWindow.addColor();
} else { } else {
this.$message({ this.$message({
message: res.data.msg, message: res.data.msg,
@ -513,14 +538,14 @@ export default {
//获取视频分析结果 //获取视频分析结果
analysisData() { analysisData() {
getAnalysisData(this.$route.query.id).then(res => { getAnalysisData(this.$route.query.id).then(res => {
console.log("res.data.data",res.data.data) console.log('res.data.data', res.data.data);
this.analysis.trafficAnalysisPath1 = res.data.data.trafficAnalysisPath1 this.analysis.trafficAnalysisPath1 = res.data.data.trafficAnalysisPath1;
this.analysis.trafficAnalysisPath2 = res.data.data.trafficAnalysisPath2 this.analysis.trafficAnalysisPath2 = res.data.data.trafficAnalysisPath2;
this.analysis.videoAnalysisPath = res.data.data.videoAnalysisPath this.analysis.videoAnalysisPath = res.data.data.videoAnalysisPath;
this.analysis.videoName = res.data.data.videoName this.analysis.videoName = res.data.data.videoName;
this.analysis.videoPath = res.data.data.videoPath this.analysis.videoPath = res.data.data.videoPath;
this.analysis.videoTotalFrames = res.data.data.videoTotalFrames this.analysis.videoTotalFrames = res.data.data.videoTotalFrames;
this.analysis.videoType=this.$route.query.type this.analysis.videoType = this.$route.query.type;
}); });
}, },
//停止订阅mqtt //停止订阅mqtt
@ -598,7 +623,6 @@ export default {
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = []; var detId = [];
const msgN = JSON.parse(temp); const msgN = JSON.parse(temp);
console.log("trigger_msgN",msgN)
this.triggerListData = msgN; this.triggerListData = msgN;
} catch (error) {} } catch (error) {}
break; break;
@ -610,7 +634,6 @@ export default {
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = []; var detId = [];
const msgN = JSON.parse(temp); const msgN = JSON.parse(temp);
// console.log("trigger_msgN",msgN)
this.cycleTimeData = msgN; this.cycleTimeData = msgN;
} catch (error) {} } catch (error) {}
break; break;
@ -622,7 +645,6 @@ export default {
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = []; var detId = [];
const msgN = JSON.parse(temp); const msgN = JSON.parse(temp);
// console.log("trigger_msgN",msgN)
this.cycleStatistics = msgN; this.cycleStatistics = msgN;
} catch (error) {} } catch (error) {}
break; break;
@ -643,22 +665,24 @@ export default {
//初始化unity //初始化unity
OnSceneN() { OnSceneN() {
var ip = window.location.host; var ip = window.location.host;
this.ipData = "http://"+ip.split(":")[0]+':5000' this.ipData = 'http://' + ip.split(':')[0] + ':5000';
// document.getElementById('mapModule').contentWindow.getIpData(this.ipData); // document.getElementById('mapModule').contentWindow.getIpData(this.ipData);
document.getElementById('mapModule').contentWindow.getIpData('http://172.16.1.168:5000'); document.getElementById('mapModule').contentWindow.getIpData('http://172.16.1.168:5000');
if (this.$route.query.type == '离线视频') { if (this.$route.query.type == '离线视频') {
document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis)); document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));
} }
document.getElementById('mapModule').contentWindow.postVideoId(JSON.stringify(this.$route.query.id+ ',' +this.$route.query.type)); document
.getElementById('mapModule')
.contentWindow.postVideoId(JSON.stringify(this.$route.query.id + ',' + this.$route.query.type));
}, },
//删除图形成功获取数据 //删除图形成功获取数据
delSuccess() { delSuccess() {
if (this.$route.query.type == '离线视频') { if (this.$route.query.type == '离线视频') {
this.$message({ this.$message({
type: "warning", type: 'warning',
message: "请点击交通分析，获取最新数据！", message: '请点击交通分析，获取最新数据！',
showClose: true, showClose: true,
duration:0, duration: 0
}); });
} }
}, },
@ -683,13 +707,13 @@ export default {
if (res.data.data.timeMode != '') { if (res.data.data.timeMode != '') {
this.componentForm.timeMode = res.data.data.timeMode; this.componentForm.timeMode = res.data.data.timeMode;
} else { } else {
console.log("this.componentForm.timeMode",this.componentForm.timeMode); console.log('this.componentForm.timeMode', this.componentForm.timeMode);
console.log("this.componentForm.componentType",this.componentForm.componentType); console.log('this.componentForm.componentType', this.componentForm.componentType);
if (this.componentForm.componentType == '延误' || this.componentForm.componentType == '拥堵') { if (this.componentForm.componentType == '延误' || this.componentForm.componentType == '拥堵') {
console.log("this.componentForm.timeMode",this.componentForm.timeMode); console.log('this.componentForm.timeMode', this.componentForm.timeMode);
this.componentForm.timeMode = '周期统计' this.componentForm.timeMode = '周期统计';
} else { } else {
this.componentForm.timeMode = '触发' this.componentForm.timeMode = '触发';
} }
} }
this.componentForm.componentParameterId = res.data.data.componentParameterId; this.componentForm.componentParameterId = res.data.data.componentParameterId;
@ -788,9 +812,9 @@ export default {
this.componentForm.timeMode = res.data.data.timeMode; this.componentForm.timeMode = res.data.data.timeMode;
} else { } else {
if (this.componentForm.componentType == '延误' || this.componentForm.componentType == '拥堵') { if (this.componentForm.componentType == '延误' || this.componentForm.componentType == '拥堵') {
this.componentForm.timeMode = '周期统计' this.componentForm.timeMode = '周期统计';
} else { } else {
this.componentForm.timeMode = '触发' this.componentForm.timeMode = '触发';
} }
} }
this.componentForm.componentName = res.data.data.componentName; this.componentForm.componentName = res.data.data.componentName;
@ -955,7 +979,9 @@ export default {
// }, 3000); // }, 3000);
document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data)); document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data));
document.getElementById('mapModule').contentWindow.postFigureName( document
.getElementById('mapModule')
.contentWindow.postFigureName(
JSON.stringify(res.data.data + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew) JSON.stringify(res.data.data + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew)
); );
@ -1004,10 +1030,10 @@ export default {
}); });
setTimeout(() => { setTimeout(() => {
this.$message({ this.$message({
type: "warning", type: 'warning',
message: "请点击交通分析，获取最新数据！", message: '请点击交通分析，获取最新数据！',
showClose: true, showClose: true,
duration:0, duration: 0
}); });
}, 5000); }, 5000);
console.log('startFigureName', this.startFigureName); console.log('startFigureName', this.startFigureName);
@ -1048,7 +1074,6 @@ export default {
formData.append('startValue', componentForm.startValue); formData.append('startValue', componentForm.startValue);
formData.append('timeMode', componentForm.timeMode); formData.append('timeMode', componentForm.timeMode);
formData.append('presentationForm', '矩阵图'); formData.append('presentationForm', '矩阵图');
} else if (componentForm.componentType == '类型') { } else if (componentForm.componentType == '类型') {
//名称 //名称