2023022104
This commit is contained in:
commit
e3a50535e4
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
@ -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,107 +115,113 @@ 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();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
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>
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
@ -27,59 +35,50 @@ export default {
|
||||||
chartName: {
|
chartName: {
|
||||||
type: String
|
type: String
|
||||||
},
|
},
|
||||||
typeValue:{
|
typeValue: {
|
||||||
type:Object
|
type: Object
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
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>
|
||||||
|
|
@ -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,14 +74,14 @@ 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%',
|
||||||
right: '4%',
|
right: '4%',
|
||||||
|
|
@ -282,4 +291,10 @@ export default {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped></style>
|
<style scoped>
|
||||||
|
.tableTitle {
|
||||||
|
background: #f7f8fa;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,25 @@
|
||||||
<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>
|
||||||
export default {
|
export default {
|
||||||
name: 'pieChart',//饼图图组件
|
name: 'pieChart', //饼图图组件
|
||||||
props: {
|
props: {
|
||||||
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>
|
||||||
|
|
|
||||||
|
|
@ -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,26 +80,54 @@
|
||||||
</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>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -138,43 +160,31 @@ export default {
|
||||||
flow: 0,
|
flow: 0,
|
||||||
isRefer: true,
|
isRefer: true,
|
||||||
|
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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,14 +100,14 @@ export default {
|
||||||
console.log(`当前页: ${val}`);
|
console.log(`当前页: ${val}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.test-div i {
|
.test-div i {
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
}
|
}
|
||||||
.dialog .el-form-item{
|
.dialog .el-form-item {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -37,9 +51,9 @@
|
||||||
</div>
|
</div>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
<!-- 详情框 -->
|
<!-- 详情框 -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<!-- :data="triggerList.length != 0 ? tripHandle(o) : tableData" -->
|
<!-- :data="triggerList.length != 0 ? tripHandle(o) : tableData" -->
|
||||||
<script>
|
<script>
|
||||||
import typeChart from '../../components/target/typeChart.vue';
|
import typeChart from '../../components/target/typeChart.vue';
|
||||||
import OD from '../../components/target/OD.vue';
|
import OD from '../../components/target/OD.vue';
|
||||||
|
|
@ -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,38 +447,38 @@ 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');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
immediate: true
|
immediate: true
|
||||||
},
|
},
|
||||||
// 周期统计数据
|
// 周期统计数据
|
||||||
cycleStatistics:{
|
cycleStatistics: {
|
||||||
handler(newVal){
|
handler(newVal) {
|
||||||
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,
|
||||||
|
|
|
||||||
|
|
@ -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,19 +93,30 @@
|
||||||
<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>
|
||||||
<el-form-item label="流量类型：" v-if="componentForm.componentType=='流量'">
|
<el-form-item label="流量类型：" v-if="componentForm.componentType == '流量'">
|
||||||
<el-radio-group v-model="componentForm.FlowType" >
|
<el-radio-group v-model="componentForm.FlowType">
|
||||||
<el-radio label="出流"></el-radio>
|
<el-radio label="出流"></el-radio>
|
||||||
<el-radio label="入流"></el-radio>
|
<el-radio label="入流"></el-radio>
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</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="周期时刻"
|
||||||
|
|
@ -100,11 +124,11 @@
|
||||||
componentForm.componentType != '排队数' &&
|
componentForm.componentType != '排队数' &&
|
||||||
componentForm.componentType != '检测数' &&
|
componentForm.componentType != '检测数' &&
|
||||||
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,11 +144,8 @@
|
||||||
<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="分钟"
|
<el-option label="小时" value="小时"></el-option>
|
||||||
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>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -207,8 +228,8 @@ export default {
|
||||||
dialogFormVisible: false,
|
dialogFormVisible: false,
|
||||||
areaComponent: false,
|
areaComponent: false,
|
||||||
indexModule: false,
|
indexModule: false,
|
||||||
disabledTrafficAnalysis:true,
|
disabledTrafficAnalysis: true,
|
||||||
disabledVideoAnalysis:false,
|
disabledVideoAnalysis: false,
|
||||||
//判断模拟区，画布区
|
//判断模拟区，画布区
|
||||||
numberNew: 1,
|
numberNew: 1,
|
||||||
speed: false,
|
speed: false,
|
||||||
|
|
@ -276,11 +297,10 @@ export default {
|
||||||
componentType: '',
|
componentType: '',
|
||||||
typeFiltering: '',
|
typeFiltering: '',
|
||||||
typeData: [],
|
typeData: [],
|
||||||
FlowType:'出流'
|
FlowType: '出流'
|
||||||
|
|
||||||
},
|
},
|
||||||
// typeData: ['小汽车', '公交车', '卡车', '非机动车', '行人'],
|
// typeData: ['小汽车', '公交车', '卡车', '非机动车', '行人'],
|
||||||
typeData:['机动车','非机动车','行人'],
|
typeData: ['机动车', '非机动车', '行人'],
|
||||||
//展现形式
|
//展现形式
|
||||||
presentation: ['数值', '表格', '时间曲线图', '均值图'],
|
presentation: ['数值', '表格', '时间曲线图', '均值图'],
|
||||||
trackForm: {
|
trackForm: {
|
||||||
|
|
@ -328,29 +348,29 @@ export default {
|
||||||
analysisConfigurationdata: {},
|
analysisConfigurationdata: {},
|
||||||
//触发数据
|
//触发数据
|
||||||
triggerData: [],
|
triggerData: [],
|
||||||
triggerListData:[],
|
triggerListData: [],
|
||||||
//周期时刻
|
//周期时刻
|
||||||
cycleTimeData:[],
|
cycleTimeData: [],
|
||||||
//周期统计
|
//周期统计
|
||||||
cycleStatistics:[],
|
cycleStatistics: [],
|
||||||
//视频类型
|
//视频类型
|
||||||
videoType: '',
|
videoType: '',
|
||||||
videoAnalysisShow: false,
|
videoAnalysisShow: false,
|
||||||
trafficAnalysisShow: false,
|
trafficAnalysisShow: false,
|
||||||
//控制unity展示
|
//控制unity展示
|
||||||
videoUnityShow:true,
|
videoUnityShow: true,
|
||||||
videoAnalysisSta:'',
|
videoAnalysisSta: '',
|
||||||
analysis:{
|
analysis: {
|
||||||
trafficAnalysisPath1:'',
|
trafficAnalysisPath1: '',
|
||||||
trafficAnalysisPath2:'',
|
trafficAnalysisPath2: '',
|
||||||
videoAnalysisPath:'',
|
videoAnalysisPath: '',
|
||||||
videoName:'',
|
videoName: '',
|
||||||
videoPath:'',
|
videoPath: '',
|
||||||
videoTotalFrames:'',
|
videoTotalFrames: '',
|
||||||
videoType:'实时视频'
|
videoType: '实时视频'
|
||||||
},
|
},
|
||||||
description:'请等待排队',
|
description: '请等待排队',
|
||||||
ipData:''
|
ipData: ''
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -372,7 +392,7 @@ export default {
|
||||||
window.getSingleComponentId = this.getSingleComponentIdN;
|
window.getSingleComponentId = this.getSingleComponentIdN;
|
||||||
window.getSimulationAreaEdit = this.getSimulationAreaEdit;
|
window.getSimulationAreaEdit = this.getSimulationAreaEdit;
|
||||||
|
|
||||||
window.delSuccess= this.delSuccess;
|
window.delSuccess = this.delSuccess;
|
||||||
|
|
||||||
// console.log("id",id)
|
// console.log("id",id)
|
||||||
// console.log("num",num)
|
// console.log("num",num)
|
||||||
|
|
@ -387,10 +407,10 @@ export default {
|
||||||
this.createMqtt();
|
this.createMqtt();
|
||||||
|
|
||||||
// document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));
|
// document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));
|
||||||
} 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);
|
||||||
|
|
@ -436,34 +461,34 @@ 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;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
@ -471,13 +496,13 @@ export default {
|
||||||
videoAnalysisBtn() {
|
videoAnalysisBtn() {
|
||||||
startVideoAnalysis(this.$route.query.id).then(res => {
|
startVideoAnalysis(this.$route.query.id).then(res => {
|
||||||
//
|
//
|
||||||
if(res.data.msg=='请求成功'){
|
if (res.data.msg == '请求成功') {
|
||||||
this.$message({
|
this.$message({
|
||||||
message: '启动成功',
|
message: '启动成功',
|
||||||
type: 'success'
|
type: 'success'
|
||||||
});
|
});
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.getAnalysisStatus()
|
this.getAnalysisStatus();
|
||||||
}, 5000);
|
}, 5000);
|
||||||
// if(this.videoAnalysisSta=='已分析'){
|
// if(this.videoAnalysisSta=='已分析'){
|
||||||
|
|
||||||
|
|
@ -495,14 +520,14 @@ 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,
|
||||||
type: 'warning'
|
type: 'warning'
|
||||||
|
|
@ -511,16 +536,16 @@ 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
|
||||||
|
|
@ -534,7 +559,7 @@ export default {
|
||||||
realInfo(topic, message) {
|
realInfo(topic, message) {
|
||||||
switch (topic) {
|
switch (topic) {
|
||||||
// 接收托片
|
// 接收托片
|
||||||
case 'img'+this.number:
|
case 'img' + this.number:
|
||||||
try {
|
try {
|
||||||
const utf8decoder = new TextDecoder();
|
const utf8decoder = new TextDecoder();
|
||||||
const u8arr = new Uint8Array(message);
|
const u8arr = new Uint8Array(message);
|
||||||
|
|
@ -551,7 +576,7 @@ export default {
|
||||||
} catch (error) {}
|
} catch (error) {}
|
||||||
break;
|
break;
|
||||||
// 树结构
|
// 树结构
|
||||||
case 'stream'+this.number:
|
case 'stream' + this.number:
|
||||||
try {
|
try {
|
||||||
const utf8decoder1 = new TextDecoder();
|
const utf8decoder1 = new TextDecoder();
|
||||||
const u8arr = new Uint8Array(message);
|
const u8arr = new Uint8Array(message);
|
||||||
|
|
@ -562,7 +587,7 @@ export default {
|
||||||
} catch (error) {}
|
} catch (error) {}
|
||||||
break;
|
break;
|
||||||
// 控制台输出
|
// 控制台输出
|
||||||
case 'trajectory'+this.number:
|
case 'trajectory' + this.number:
|
||||||
try {
|
try {
|
||||||
const utf8decoder = new TextDecoder();
|
const utf8decoder = new TextDecoder();
|
||||||
const u8arr = new Uint8Array(message);
|
const u8arr = new Uint8Array(message);
|
||||||
|
|
@ -573,7 +598,7 @@ export default {
|
||||||
} catch (error) {}
|
} catch (error) {}
|
||||||
break;
|
break;
|
||||||
// 触发
|
// 触发
|
||||||
case 'detection'+this.number:
|
case 'detection' + this.number:
|
||||||
try {
|
try {
|
||||||
const utf8decoder = new TextDecoder();
|
const utf8decoder = new TextDecoder();
|
||||||
const u8arr = new Uint8Array(message);
|
const u8arr = new Uint8Array(message);
|
||||||
|
|
@ -590,7 +615,7 @@ export default {
|
||||||
}
|
}
|
||||||
} catch (error) {}
|
} catch (error) {}
|
||||||
break;
|
break;
|
||||||
case 'trigger-'+this.$route.query.id:
|
case 'trigger-' + this.$route.query.id:
|
||||||
try {
|
try {
|
||||||
// console.log("trigger_msgN",message)
|
// console.log("trigger_msgN",message)
|
||||||
const utf8decoder = new TextDecoder();
|
const utf8decoder = new TextDecoder();
|
||||||
|
|
@ -598,11 +623,10 @@ 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;
|
||||||
case 'cycle_time-'+this.$route.query.id:
|
case 'cycle_time-' + this.$route.query.id:
|
||||||
try {
|
try {
|
||||||
// console.log("trigger_msgN",message)
|
// console.log("trigger_msgN",message)
|
||||||
const utf8decoder = new TextDecoder();
|
const utf8decoder = new TextDecoder();
|
||||||
|
|
@ -610,11 +634,10 @@ 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;
|
||||||
case 'cycle_statistics-'+this.$route.query.id:
|
case 'cycle_statistics-' + this.$route.query.id:
|
||||||
try {
|
try {
|
||||||
// console.log("trigger_msgN",message)
|
// console.log("trigger_msgN",message)
|
||||||
const utf8decoder = new TextDecoder();
|
const utf8decoder = new TextDecoder();
|
||||||
|
|
@ -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
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -682,14 +706,14 @@ export default {
|
||||||
this.componentForm.componentName = res.data.data.componentName;
|
this.componentForm.componentName = res.data.data.componentName;
|
||||||
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;
|
||||||
|
|
@ -786,11 +810,11 @@ 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 {
|
||||||
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 == '类型') {
|
||||||
//名称
|
//名称
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue