bug修改
This commit is contained in:
parent
50b57d731b
commit
54e610af2e
|
|
@ -31,7 +31,8 @@
|
||||||
"vue-router": "^3.0.3",
|
"vue-router": "^3.0.3",
|
||||||
"vue-schart": "^2.0.0",
|
"vue-schart": "^2.0.0",
|
||||||
"vuedraggable": "^2.17.0",
|
"vuedraggable": "^2.17.0",
|
||||||
"vuex": "^3.6.2"
|
"vuex": "^3.6.2",
|
||||||
|
"lodash": "^4.17.15"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "^3.9.0",
|
"@vue/cli-plugin-babel": "^3.9.0",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,254 @@
|
||||||
|
<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 + '-' + '均值图' + '-' + status }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="barChart" ref="barChart" style="width: 705px; height: 300px"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'barChart', //均值图图组件
|
||||||
|
props: {
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
typeValue: {
|
||||||
|
type: Object
|
||||||
|
},
|
||||||
|
// 组件名称
|
||||||
|
componentName: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
chartName: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
status: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
drawBar(arr) {
|
||||||
|
// console.log("均值图",arr)
|
||||||
|
if (arr && Object.keys(arr).length > 0) {
|
||||||
|
arr.avg = arr.avg ? Math.abs(arr.avg) : 0;
|
||||||
|
arr.med = arr.med ? Math.abs(arr.med) : 0;
|
||||||
|
arr.max = arr.max ? Math.abs(arr.max) : 0;
|
||||||
|
arr.min = arr.min ? Math.abs(arr.min) : 0;
|
||||||
|
}
|
||||||
|
let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
|
||||||
|
if (myChart == null) {
|
||||||
|
myChart = this.$echarts.init(this.$refs.barChart);
|
||||||
|
}
|
||||||
|
let chartData = [{ stage: '', number: 40 }];
|
||||||
|
let option = {
|
||||||
|
tooltip: {},
|
||||||
|
color: ['#0EECE4'],
|
||||||
|
grid: {
|
||||||
|
left: '0%',
|
||||||
|
right: '0%',
|
||||||
|
bottom: '10%',
|
||||||
|
top: '15%',
|
||||||
|
z: 22
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
gridIndex: 0,
|
||||||
|
data: chartData.map((item) => item.stage),
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
|
||||||
|
splitArea: { show: false },
|
||||||
|
gridIndex: 0,
|
||||||
|
min: 0,
|
||||||
|
splitNumber: 12,
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
max: 200
|
||||||
|
},
|
||||||
|
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: '平均值',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'val',
|
||||||
|
barWidth: 150,
|
||||||
|
xAxisIndex: 0,
|
||||||
|
yAxisIndex: 0,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'right',
|
||||||
|
// offset: [10, 20],
|
||||||
|
distance: 15,
|
||||||
|
color: '#000',
|
||||||
|
fontSize: 17,
|
||||||
|
formatter: '{c}' + '[avg]'
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#89c6ff'
|
||||||
|
},
|
||||||
|
data: [arr.avg],
|
||||||
|
zlevel: 9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '中间值',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 150,
|
||||||
|
stack: 'val',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'left',
|
||||||
|
distance: 15,
|
||||||
|
color: '#000',
|
||||||
|
fontSize: 17,
|
||||||
|
formatter: '{c}' + '[med]',
|
||||||
|
rich: {}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#67b4fd'
|
||||||
|
},
|
||||||
|
data: [arr.med],
|
||||||
|
zlevel: 9
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: '最大值',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'val',
|
||||||
|
barWidth: 150,
|
||||||
|
barGap: '-100%',
|
||||||
|
data: [arr.max],
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'right',
|
||||||
|
distance: 10,
|
||||||
|
color: '#000',
|
||||||
|
fontSize: 17,
|
||||||
|
offset: [0, -30],
|
||||||
|
formatter: '{c}' + '[max]'
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#319cff'
|
||||||
|
},
|
||||||
|
zlevel: 9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '最小值',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'val',
|
||||||
|
barWidth: 150,
|
||||||
|
barGap: '-100%',
|
||||||
|
data: [arr.min],
|
||||||
|
label: {
|
||||||
|
offset: [10, 20],
|
||||||
|
show: true,
|
||||||
|
position: 'left',
|
||||||
|
distance: 10,
|
||||||
|
color: '#000',
|
||||||
|
offset: [0, -30],
|
||||||
|
fontSize: 17,
|
||||||
|
formatter: '{c}' + '[min]'
|
||||||
|
},
|
||||||
|
// tooltip: {
|
||||||
|
// backgroundColor: 'transparent',
|
||||||
|
// formatter: ' '
|
||||||
|
// },
|
||||||
|
itemStyle: {
|
||||||
|
color: '#328adc'
|
||||||
|
},
|
||||||
|
zlevel: 9
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
// myChart.setOption(option)
|
||||||
|
// myChart.resize();
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// this.drawBar(this.typeValue);
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
list: {
|
||||||
|
handler: function (newval, oldVal) {
|
||||||
|
if (newval && newval.length > 0) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.drawBar(newval[0]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
// immediate: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.tableTitle {
|
||||||
|
background: #f7f8fa;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,162 @@
|
||||||
|
<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 + '-' + '柱状图' + '-' + status }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="barChart" ref="barChart" style="width: 705px; height: 300px"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getNameFromTargetType } from '@/utils/targetType';
|
||||||
|
export default {
|
||||||
|
name: 'barChart', //饼图组件
|
||||||
|
props: {
|
||||||
|
list: Array,
|
||||||
|
default() {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
pageType: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
status: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
componentName: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
chartName: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
typeValue: {
|
||||||
|
type: Object
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
methods: {
|
||||||
|
drawBar(newVal) {
|
||||||
|
if (newVal && newVal.type_data && newVal.type_data.length > 0) {
|
||||||
|
var xData = newVal.type_data.map((ele) => {
|
||||||
|
return getNameFromTargetType(ele.name);
|
||||||
|
});
|
||||||
|
var yData = newVal.type_data.map((ele) => {
|
||||||
|
return ele.quantity;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
|
||||||
|
if (myChart == null) {
|
||||||
|
myChart = this.$echarts.init(this.$refs.barChart);
|
||||||
|
}
|
||||||
|
let option = {
|
||||||
|
color: ['#7262FD', '#FC5A5A'],
|
||||||
|
tooltip: {
|
||||||
|
confine: true
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '5%',
|
||||||
|
right: '5%',
|
||||||
|
bottom: '0%',
|
||||||
|
top: '5%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: xData,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#000',
|
||||||
|
rotate: 30
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
min: 0,
|
||||||
|
minInterval: 1,
|
||||||
|
splitArea: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
|
||||||
|
axisLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#eeebeb',
|
||||||
|
type: 'dashed' // dotted 虚线
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#000',
|
||||||
|
fontFamily: 'Bebas'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 20,
|
||||||
|
itemStyle: { barBorderRadius: [5, 5, 0, 0] },
|
||||||
|
name: '时间',
|
||||||
|
data: yData
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
// myChart.setOption(option)
|
||||||
|
// myChart.resize();
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
watch: {
|
||||||
|
list: {
|
||||||
|
handler: function (newval, oldVal) {
|
||||||
|
if (newval && newval.length > 0) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.drawBar(newval[0]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
// immediate: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,125 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- <div class="down">
|
||||||
|
<el-dropdown trigger="click" @command="handleCommand">
|
||||||
|
<span class="moreIcon"></span>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item command="show">查看详情</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div> -->
|
||||||
|
<el-dialog title="编辑" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
|
||||||
|
<el-form label-width="80px">
|
||||||
|
<el-form-item label="val1">
|
||||||
|
<el-time-select
|
||||||
|
placeholder="起始时间"
|
||||||
|
v-model="startTime"
|
||||||
|
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
|
||||||
|
>
|
||||||
|
</el-time-select>
|
||||||
|
<el-time-select
|
||||||
|
placeholder="结束时间"
|
||||||
|
v-model="endTime"
|
||||||
|
:picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
|
||||||
|
>
|
||||||
|
</el-time-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="val2">
|
||||||
|
<el-select v-model="value" placeholder="请选择">
|
||||||
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="val3">
|
||||||
|
<el-input></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="val4">
|
||||||
|
<el-checkbox-group v-model="checkList">
|
||||||
|
<el-checkbox label="数值"></el-checkbox>
|
||||||
|
<el-checkbox label="表格"></el-checkbox>
|
||||||
|
<el-checkbox label="时间曲线图"></el-checkbox>
|
||||||
|
<el-checkbox label="均值图"></el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="onSubmit">确认</el-button>
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'detailDialog', //速度组件
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dialogVisible: false,
|
||||||
|
startTime: '',
|
||||||
|
endTime: '',
|
||||||
|
checkList: ['复选框 A'],
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
value: '选项1',
|
||||||
|
label: '黄金糕'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '选项2',
|
||||||
|
label: '双皮奶'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '选项3',
|
||||||
|
label: '蚵仔煎'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '选项4',
|
||||||
|
label: '龙须面'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '选项5',
|
||||||
|
label: '北京烤鸭'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
value: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onSubmit() {},
|
||||||
|
handleCommand(command) {
|
||||||
|
// 用户名下拉菜单选择事件
|
||||||
|
if (command == 'show') {
|
||||||
|
this.dialogVisible = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleClose(done) {
|
||||||
|
this.$confirm('确认关闭？')
|
||||||
|
.then((_) => {
|
||||||
|
done();
|
||||||
|
})
|
||||||
|
.catch((_) => {});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.down {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
.down .moreIcon{
|
||||||
|
width: 5px;
|
||||||
|
height: 18px;
|
||||||
|
background-size: 5px 18px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 100;
|
||||||
|
background-image: url(../../assets/img/more.png);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,451 @@
|
||||||
|
<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 + '-' + '曲线图' + '-' + status,
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="lineChart" ref="lineChart" style="width: 705px; height: 300px"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getNameFromTargetType } from '@/utils/targetType';
|
||||||
|
export default {
|
||||||
|
name: 'lineChart', //折线图组件
|
||||||
|
props: {
|
||||||
|
itemData: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
originalDataArr: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pageType: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
// 时间模式
|
||||||
|
status: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
// 组件名称
|
||||||
|
componentName: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
chartName: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
// 单个数据接收
|
||||||
|
typeValue: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
xData: [],
|
||||||
|
yData: [],
|
||||||
|
yData1: [],
|
||||||
|
yData2: [],
|
||||||
|
yData3: [],
|
||||||
|
arrN: [],
|
||||||
|
// series: []
|
||||||
|
// triggerType:'触发时刻'
|
||||||
|
myChart: null,
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
trigger: 'axis',
|
||||||
|
backgroundColor: 'rgba(1, 13, 19, 0.5)',
|
||||||
|
borderWidth: 1,
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
// label: {
|
||||||
|
// show: true,
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
|
||||||
|
textStyle: {
|
||||||
|
color: 'rgba(212, 232, 254, 1)'
|
||||||
|
// fontSize: fontChart(0.24),
|
||||||
|
},
|
||||||
|
extraCssText: 'z-index:2'
|
||||||
|
},
|
||||||
|
name: 'km/h',
|
||||||
|
series: [],
|
||||||
|
|
||||||
|
//
|
||||||
|
listArr: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// console.log(this.componentName + '-' + JSON.stringify(this.itemData));
|
||||||
|
// console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
drawLine(newVal, title, timeMode) {
|
||||||
|
// console.log('newVal == ', newVal)
|
||||||
|
let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
|
||||||
|
if (myChart == null) {
|
||||||
|
myChart = this.$echarts.init(this.$refs.lineChart);
|
||||||
|
}
|
||||||
|
// var series = []
|
||||||
|
if (newVal) {
|
||||||
|
this.xData = newVal.map((val) => {
|
||||||
|
return val.time;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// myChart.showLoading() //开启loading
|
||||||
|
let option = {
|
||||||
|
legend: {},
|
||||||
|
grid: {
|
||||||
|
left: '2%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '10%',
|
||||||
|
top: '20%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
tooltip: this.tooltip,
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#eeebeb',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#6c6c6c'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
boundaryGap: ['5%', '5%'],
|
||||||
|
|
||||||
|
data: this.xData.reverse()
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: this.name,
|
||||||
|
axisLabel: {
|
||||||
|
color: '#6c6c6c'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#eeebeb',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: this.getMessage(newVal, title, timeMode)
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
// myChart.setOption(option)
|
||||||
|
// myChart.resize();
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
//传值对应字段返回相应字段数组
|
||||||
|
extractKeyValues(arr, key) {
|
||||||
|
return arr.map((item) => {
|
||||||
|
if (key == 'speed' && item[key]) {
|
||||||
|
return Math.abs(item[key]);
|
||||||
|
}
|
||||||
|
return item[key];
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getMessage(newVal, title, timeMode) {
|
||||||
|
if (newVal) {
|
||||||
|
var series = [
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
type: 'line',
|
||||||
|
symbolSize: 6,
|
||||||
|
smooth: true,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#fb864b',
|
||||||
|
borderColor: '#fb864b'
|
||||||
|
// borderWidth: 2
|
||||||
|
},
|
||||||
|
data: []
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
if (title === '类型') {
|
||||||
|
this.tooltip = {
|
||||||
|
show: true,
|
||||||
|
confine: true,
|
||||||
|
trigger: 'axis',
|
||||||
|
backgroundColor: 'rgba(1, 13, 19, 0.5)',
|
||||||
|
borderWidth: 1,
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
// label: {
|
||||||
|
// show: true,
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
|
||||||
|
textStyle: {
|
||||||
|
color: 'rgba(212, 232, 254, 1)'
|
||||||
|
// fontSize: fontChart(0.24),
|
||||||
|
},
|
||||||
|
extraCssText: 'z-index:2'
|
||||||
|
};
|
||||||
|
this.name = '';
|
||||||
|
series[0].name = '总量';
|
||||||
|
//获取每种类型数据逻辑有问题
|
||||||
|
// 映射出类型数组
|
||||||
|
// let arr = newVal.map(function (ele) {
|
||||||
|
// if (ele.type_data != null) {
|
||||||
|
// return ele.type_data;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// var mapN = [];
|
||||||
|
// if (arr && arr.length > 0) {
|
||||||
|
// for (var t = 0; t < arr.length; t++) {
|
||||||
|
// if (arr[t] && arr[t].length > 0) {
|
||||||
|
// for (var i = 0; i < arr[t].length; i++) {
|
||||||
|
// mapN.push(arr[t][i]);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// var lineArr = [];
|
||||||
|
// if (newVal[0].type_data != undefined) {
|
||||||
|
// newVal[0].type_data.forEach((ele) => {
|
||||||
|
// lineArr.push({
|
||||||
|
// name: ele.name,
|
||||||
|
// type: 'line',
|
||||||
|
// data: [],
|
||||||
|
// smooth: true
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// console.log('newVal', newVal);
|
||||||
|
//获取每种类型数据逻辑有问题
|
||||||
|
// mapN.forEach((ele, index) => {
|
||||||
|
|
||||||
|
// if (lineArr[index] && lineArr[index].data) {
|
||||||
|
// let t = ele.quantity
|
||||||
|
// if(ele.value||ele.value===0){
|
||||||
|
// t = ele.value
|
||||||
|
// }
|
||||||
|
// lineArr[index].data.push(t);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// console.log('lineArr', lineArr);
|
||||||
|
var lineArr = [];
|
||||||
|
let seriesArr = this.extractKeyValues(newVal, 'type_data');
|
||||||
|
if (seriesArr && seriesArr.length > 0) {
|
||||||
|
const firstLevel = seriesArr.find((i) => i && i.length > 0);
|
||||||
|
if (firstLevel && firstLevel.length > 0) {
|
||||||
|
for (let i = 0; i < firstLevel.length; i++) {
|
||||||
|
const item = firstLevel[i];
|
||||||
|
if (item) {
|
||||||
|
const valueList = seriesArr.map((arr) => {
|
||||||
|
if (arr) {
|
||||||
|
let t = arr[i] && arr[i].value;
|
||||||
|
if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) {
|
||||||
|
t = arr[i].quantity;
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
lineArr.push({
|
||||||
|
name: getNameFromTargetType(item.name),
|
||||||
|
data: valueList,
|
||||||
|
type: 'line',
|
||||||
|
smooth: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (lineArr && lineArr.length > 0) {
|
||||||
|
for (let j = 0; j < lineArr.length; j++) {
|
||||||
|
series.push(lineArr[j]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 总和数量
|
||||||
|
let mapNR1 = [];
|
||||||
|
newVal.map(function (ele) {
|
||||||
|
if (ele.type_data != null) {
|
||||||
|
let sum = ele.type_data.reduce(function (prev, cur) {
|
||||||
|
let t = cur.quantity;
|
||||||
|
if (cur.value || cur.value === 0) {
|
||||||
|
t = cur.value;
|
||||||
|
}
|
||||||
|
return t + prev;
|
||||||
|
}, 0);
|
||||||
|
mapNR1.push(sum);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
series[0].data = mapNR1;
|
||||||
|
} else if (title === '速度') {
|
||||||
|
let unit = 'km/h';
|
||||||
|
if (this.originalDataArr && this.originalDataArr.length > 0) {
|
||||||
|
if (this.originalDataArr[0].speed >= 0) {
|
||||||
|
unit = 'km/h';
|
||||||
|
} else {
|
||||||
|
unit = 'pix/s';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.tooltip = {
|
||||||
|
formatter: `{a} {b}:{c}${unit}`,
|
||||||
|
show: true,
|
||||||
|
confine: true
|
||||||
|
};
|
||||||
|
this.name = unit;
|
||||||
|
// console.log(this.status + '-速度-' + JSON.stringify(newVal));
|
||||||
|
series[0].data = newVal.map((val) => {
|
||||||
|
if (val.speed == -1) {
|
||||||
|
return '-';
|
||||||
|
}
|
||||||
|
return Math.abs(val.speed);
|
||||||
|
});
|
||||||
|
} else if (title === '流量') {
|
||||||
|
this.name = '辆';
|
||||||
|
if (this.status != '实时触发') {
|
||||||
|
this.name = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
|
||||||
|
}
|
||||||
|
series[0].data = newVal.map((ele) => {
|
||||||
|
return ele.in_flow + ele.out_flow;
|
||||||
|
});
|
||||||
|
} else if (title === '车头时距') {
|
||||||
|
this.name = '秒';
|
||||||
|
this.tooltip = {
|
||||||
|
formatter: '{a} {b}:{c}/s',
|
||||||
|
show: true,
|
||||||
|
confine: true
|
||||||
|
};
|
||||||
|
series[0].data = newVal.map((val) => {
|
||||||
|
if (timeMode == '固定间隔') {
|
||||||
|
if (val.ave_headway == -1) {
|
||||||
|
return '-';
|
||||||
|
}
|
||||||
|
return val.ave_headway;
|
||||||
|
} else {
|
||||||
|
return val.headway;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else if (title === '排队数') {
|
||||||
|
this.name = '辆';
|
||||||
|
if (this.status != '实时触发') {
|
||||||
|
this.name = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
|
||||||
|
}
|
||||||
|
series[0].data = newVal.map((val) => {
|
||||||
|
// return val.n_queue;
|
||||||
|
if (timeMode == '固定间隔') {
|
||||||
|
return val.ave_queue;
|
||||||
|
} else {
|
||||||
|
return val.n_queue;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else if (title === '检测数') {
|
||||||
|
this.name = '辆';
|
||||||
|
if (this.status != '实时触发') {
|
||||||
|
this.name = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
|
||||||
|
}
|
||||||
|
series[0].data = newVal.map((val) => {
|
||||||
|
if (timeMode == '固定间隔') {
|
||||||
|
return val.ave_stay;
|
||||||
|
} else {
|
||||||
|
return val.n_stay;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else if (title === '延误') {
|
||||||
|
this.name = '秒';
|
||||||
|
series[0].data = newVal.map((val) => {
|
||||||
|
return val.ave_delay;
|
||||||
|
});
|
||||||
|
} else if (title === '拥堵') {
|
||||||
|
this.name = '秒';
|
||||||
|
series[0].data = newVal.map((val) => {});
|
||||||
|
}
|
||||||
|
series.forEach((ele) => {
|
||||||
|
ele.data.reverse();
|
||||||
|
});
|
||||||
|
return series;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// if (this.historyData.length != 0) {
|
||||||
|
// this.drawLine(this.historyData, this.title, this.status);
|
||||||
|
// }
|
||||||
|
// this.getMessage(this.list)
|
||||||
|
// console.log(this.$parent.dataArr, '父组件的dataArr');
|
||||||
|
// this.$set(this.$parent.dataArr)
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
list: {
|
||||||
|
handler: function (newval, oldVal) {
|
||||||
|
if (newval && newval.length > 0) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.drawLine(newval, this.title, this.status);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
// immediate: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.tableTitle {
|
||||||
|
background: #f7f8fa;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,178 @@
|
||||||
|
<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 + '-' + '饼状图'+'-'+status, }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="pieChart" ref="pieChart" style="width: 705px; height: 300px"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getNameFromTargetType } from '@/utils/targetType';
|
||||||
|
export default {
|
||||||
|
name: 'pieChart', //饼图图组件
|
||||||
|
props: {
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
componentName: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
chartName: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
typeValue: {
|
||||||
|
type: Object
|
||||||
|
},
|
||||||
|
status: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
methods: {
|
||||||
|
drawPie(newVal) {
|
||||||
|
// var legend = [];
|
||||||
|
var seriesData = [];
|
||||||
|
if (newVal && newVal.type_data && newVal.type_data.length > 0) {
|
||||||
|
// var legend = newVal.type_data.map((ele) => {
|
||||||
|
// return ele.name;
|
||||||
|
// });
|
||||||
|
|
||||||
|
newVal.type_data.forEach((ele) => {
|
||||||
|
// console.log(JSON.stringify(ele))
|
||||||
|
// if (ele.quantity != 0) {
|
||||||
|
seriesData.push({
|
||||||
|
name: getNameFromTargetType(ele.name),
|
||||||
|
value: ele.quantity
|
||||||
|
});
|
||||||
|
// legend.push(ele.name)
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
let myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart);
|
||||||
|
if (!myChart) {
|
||||||
|
myChart = this.$echarts.init(this.$refs.pieChart);
|
||||||
|
}
|
||||||
|
var color = [
|
||||||
|
'#0CD2E6',
|
||||||
|
'#3751E6',
|
||||||
|
'#FFC722',
|
||||||
|
'#00FFFF',
|
||||||
|
'#00FF80',
|
||||||
|
'#FFEA00',
|
||||||
|
'#FF7300',
|
||||||
|
'#9500B3',
|
||||||
|
'#3377FF',
|
||||||
|
'#5087EC',
|
||||||
|
'#68BBC4',
|
||||||
|
'#58A55C',
|
||||||
|
'#F2BD42',
|
||||||
|
'#EE752F',
|
||||||
|
'#D95040',
|
||||||
|
'#14CAFB'
|
||||||
|
];
|
||||||
|
let option = {
|
||||||
|
// title: {
|
||||||
|
// show: true,
|
||||||
|
// text: this.componentName + '-' + this.chartName + '-' + '饼状图',
|
||||||
|
// textStyle: {
|
||||||
|
// lineHeight: '30'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
color: color,
|
||||||
|
animation: false,
|
||||||
|
legend: {
|
||||||
|
top: 20,
|
||||||
|
right: 10,
|
||||||
|
bottom: 20,
|
||||||
|
orient: 'vertical',
|
||||||
|
textStyle: {}
|
||||||
|
// data: legend
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
center: ['30%', '55%'],
|
||||||
|
radius: '70%',
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
length: 0,
|
||||||
|
length2: 0
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
position: 'inside',
|
||||||
|
formatter: '{value|{c}}',
|
||||||
|
rich: {
|
||||||
|
value: {
|
||||||
|
fontSize: 20,
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: seriesData
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
// myChart.setOption(option)
|
||||||
|
// myChart.resize();
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
watch: {
|
||||||
|
list: {
|
||||||
|
handler: function (newval, oldVal) {
|
||||||
|
// console.log('pieChart', newval);
|
||||||
|
if (newval && newval.length > 0) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.drawPie(newval[0]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
// immediate: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.tableTitle {
|
||||||
|
background: #f7f8fa;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,276 @@
|
||||||
|
<template>
|
||||||
|
<!-- 区域的表格 -->
|
||||||
|
<div class="tableContent">
|
||||||
|
<!-- <div class="down">
|
||||||
|
<el-dropdown trigger="click" @command="handleCommand">
|
||||||
|
<span class="moreIcon"></span>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item command="show">查看详情</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<div v-if="msg" class="regionBox">
|
||||||
|
<!-- 实时触发 -->
|
||||||
|
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '实时触发'">
|
||||||
|
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
|
||||||
|
<!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
|
||||||
|
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
|
||||||
|
<el-table-column align="center" label="目标类型" prop="type">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{getNameFromTargetType(scope.row.type)}}
|
||||||
|
</template>
|
||||||
|
<!-- <template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.type == 'Person'">行人</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
|
||||||
|
</template> -->
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="occ" label="占用状态">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.occ == '1'">占用</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="speed" label="空间平均速度">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{
|
||||||
|
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
|
||||||
|
? Math.abs(scope.row.speed)
|
||||||
|
: scope.row.speed == '-1'
|
||||||
|
? '-'
|
||||||
|
: scope.row.speed
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定时刻'">
|
||||||
|
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
|
||||||
|
<!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
|
||||||
|
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
|
||||||
|
<el-table-column align="center" label="目标类型" prop="type">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{getNameFromTargetType(scope.row.type)}}
|
||||||
|
</template>
|
||||||
|
<!-- <template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.type == 'Person'">行人</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
|
||||||
|
</template> -->
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="occ" label="占用状态">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.occ == '1'">占用</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="speed" label="空间平均速度">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{
|
||||||
|
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
|
||||||
|
? Math.abs(scope.row.speed)
|
||||||
|
: scope.row.speed == '-1'
|
||||||
|
? '-'
|
||||||
|
: scope.row.speed
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 固定间隔 -->
|
||||||
|
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定间隔'">
|
||||||
|
<!-- <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
|
||||||
|
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
|
||||||
|
<el-table-column align="center" label="目标类型" prop="type">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{getNameFromTargetType(scope.row.type)}}
|
||||||
|
</template>
|
||||||
|
<!-- <template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.type == 'Person'">行人</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
|
||||||
|
</template> -->
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="in_flow" label="驶入流量"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="out_flow" label="驶离流量"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="ave_stay" label="平均存车数"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="ave_queue" label="平均排队数"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="ave_occ" label="平均占有率"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="ave_delay" label="平均延误"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="speed" label="平均速度">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{
|
||||||
|
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
|
||||||
|
? Math.abs(scope.row.speed)
|
||||||
|
: scope.row.speed == '-1'
|
||||||
|
? '-'
|
||||||
|
: scope.row.speed
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog title="编辑" :append-to-body="true" :visible.sync="dialogVisible" width="40%">
|
||||||
|
<el-form :model="msg" label-width="80px">
|
||||||
|
<el-form-item label="val1">
|
||||||
|
<el-time-select
|
||||||
|
placeholder="起始时间"
|
||||||
|
v-model="startTime"
|
||||||
|
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
|
||||||
|
>
|
||||||
|
</el-time-select>
|
||||||
|
<el-time-select
|
||||||
|
placeholder="结束时间"
|
||||||
|
v-model="endTime"
|
||||||
|
:picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
|
||||||
|
>
|
||||||
|
</el-time-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="val2">
|
||||||
|
<el-select>
|
||||||
|
<el-option> </el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="val3">
|
||||||
|
<el-input v-model="dialogVisible"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="val4">
|
||||||
|
<el-checkbox-group v-model="checkList">
|
||||||
|
<el-checkbox label="数值"></el-checkbox>
|
||||||
|
<el-checkbox label="表格"></el-checkbox>
|
||||||
|
<el-checkbox label="时间曲线图"></el-checkbox>
|
||||||
|
<el-checkbox label="均值图"></el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary">确认</el-button>
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getNameFromTargetType } from '@/utils/targetType';
|
||||||
|
import tableShow from './tableShow.vue';
|
||||||
|
export default {
|
||||||
|
components: { tableShow },
|
||||||
|
name: 'tableShow', //表格组件
|
||||||
|
props: {
|
||||||
|
msg: {
|
||||||
|
type: Array
|
||||||
|
// default() {
|
||||||
|
// return [];
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
triggerType: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
getNameFromTargetType,
|
||||||
|
dialogVisible: false,
|
||||||
|
startTime: '',
|
||||||
|
endTime: '',
|
||||||
|
checkList: ['复选框 A']
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleCommand(command) {
|
||||||
|
// 用户名下拉菜单选择事件
|
||||||
|
if (command == 'show') {
|
||||||
|
this.dialogVisible = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// console.log(this.type,'129129');
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
msg: {
|
||||||
|
handler(newVal) {
|
||||||
|
// console.log(newVal,'流量数据table');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
/deep/ .el-table {
|
||||||
|
// height: 709px !important;
|
||||||
|
// overflow-y: scroll;
|
||||||
|
z-index: 900;
|
||||||
|
}
|
||||||
|
.el-table::-webkit-scrollbar {
|
||||||
|
width: 0 !important;
|
||||||
|
}
|
||||||
|
.tableContent {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.down {
|
||||||
|
position: absolute;
|
||||||
|
top: -35px;
|
||||||
|
right: 5px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.down .moreIcon {
|
||||||
|
width: 5px;
|
||||||
|
height: 18px;
|
||||||
|
background-size: 5px 18px;
|
||||||
|
background-image: url(../../assets/img/more.png);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableContent {
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,312 @@
|
||||||
|
<template>
|
||||||
|
<!-- 断面的表格 -->
|
||||||
|
<div class="tableContent">
|
||||||
|
<!-- <div class="down">
|
||||||
|
<el-dropdown trigger="click" @command="handleCommand">
|
||||||
|
<span class="moreIcon"></span>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item command="show">查看详情</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div> -->
|
||||||
|
<!-- 实时触发 -->
|
||||||
|
|
||||||
|
<!-- 实时触发 -->
|
||||||
|
<div v-if="msg && msg.length > 0">
|
||||||
|
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '实时触发'">
|
||||||
|
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
|
||||||
|
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
|
||||||
|
<!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
|
||||||
|
<el-table-column align="center" label="目标类型" prop="type">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{getNameFromTargetType(scope.row.type)}}
|
||||||
|
</template>
|
||||||
|
<!-- <template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.type == 'Person'">行人</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
|
||||||
|
</template> -->
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="occ" label="占用状态"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="speed" label="空间平均速度">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{
|
||||||
|
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
|
||||||
|
? Math.abs(scope.row.speed)
|
||||||
|
: scope.row.speed == '-1'
|
||||||
|
? '-'
|
||||||
|
: scope.row.speed
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定时刻'">
|
||||||
|
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
|
||||||
|
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
|
||||||
|
<!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
|
||||||
|
<el-table-column align="center" label="目标类型" prop="type">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{getNameFromTargetType(scope.row.type)}}
|
||||||
|
</template>
|
||||||
|
<!-- <template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.type == 'Person'">行人</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
|
||||||
|
</template> -->
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="occ" label="占用状态"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="speed" label="空间平均速度">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{
|
||||||
|
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
|
||||||
|
? Math.abs(scope.row.speed)
|
||||||
|
: scope.row.speed == '-1'
|
||||||
|
? '-'
|
||||||
|
: scope.row.speed
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 固定间隔 -->
|
||||||
|
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定间隔'">
|
||||||
|
<el-table-column align="center" prop="gate_id" label="断面编号"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="name" label="断面名称"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="interval" label="时间序号"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="type" label="目标类型">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{getNameFromTargetType(scope.row.type)}}
|
||||||
|
</template>
|
||||||
|
<!-- <template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.type == 'Person'">行人</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
|
||||||
|
</template> -->
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="in_flow" label="入流流量"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="out_flow" label="出流流量"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="flow" label="断面流量"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="in_spd" label="入流平均速度">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{
|
||||||
|
scope.row.in_spd && scope.row.in_spd != '-' && scope.row.speed != '-1'
|
||||||
|
? Math.abs(scope.row.in_spd)
|
||||||
|
: scope.row.in_spd == '-1'
|
||||||
|
? '-'
|
||||||
|
: scope.row.in_spd
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="out_spd" label="出流平均速度">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{
|
||||||
|
scope.row.out_spd && scope.row.out_spd != '-' && scope.row.out_spd != '-1'
|
||||||
|
? Math.abs(scope.row.out_spd)
|
||||||
|
: scope.row.out_spd == '-1'
|
||||||
|
? '-'
|
||||||
|
: scope.row.out_spd
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="speed" label="断面的平均速度">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{
|
||||||
|
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
|
||||||
|
? Math.abs(scope.row.speed)
|
||||||
|
: scope.row.speed == '-1'
|
||||||
|
? '-'
|
||||||
|
: scope.row.speed
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<el-empty :image-size="100"></el-empty>
|
||||||
|
</div>
|
||||||
|
<el-dialog title="编辑" :append-to-body="true" :visible.sync="dialogVisible" width="40%">
|
||||||
|
<el-form :model="msg" label-width="80px">
|
||||||
|
<el-form-item label="val1">
|
||||||
|
<el-time-select
|
||||||
|
placeholder="起始时间"
|
||||||
|
v-model="startTime"
|
||||||
|
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
|
||||||
|
>
|
||||||
|
</el-time-select>
|
||||||
|
<el-time-select
|
||||||
|
placeholder="结束时间"
|
||||||
|
v-model="endTime"
|
||||||
|
:picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
|
||||||
|
>
|
||||||
|
</el-time-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="val2">
|
||||||
|
<el-select v-model="value" placeholder="请选择">
|
||||||
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item label="val3">
|
||||||
|
<el-input v-model="msg[0].val3"></el-input>
|
||||||
|
</el-form-item> -->
|
||||||
|
<el-form-item label="val4">
|
||||||
|
<el-checkbox-group v-model="checkList">
|
||||||
|
<el-checkbox label="数值"></el-checkbox>
|
||||||
|
<el-checkbox label="表格"></el-checkbox>
|
||||||
|
<el-checkbox label="时间曲线图"></el-checkbox>
|
||||||
|
<el-checkbox label="均值图"></el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary">确认</el-button>
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getNameFromTargetType } from '@/utils/targetType';
|
||||||
|
export default {
|
||||||
|
name: 'tableShow', //表格组件
|
||||||
|
props: {
|
||||||
|
msg: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
triggerType: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
getNameFromTargetType,
|
||||||
|
dialogVisible: false,
|
||||||
|
startTime: '',
|
||||||
|
endTime: '',
|
||||||
|
checkList: ['复选框 A'],
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
value: '选项1',
|
||||||
|
label: '黄金糕'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '选项2',
|
||||||
|
label: '双皮奶'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '选项3',
|
||||||
|
label: '蚵仔煎'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '选项4',
|
||||||
|
label: '龙须面'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '选项5',
|
||||||
|
label: '北京烤鸭'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
value: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
msg: {
|
||||||
|
handler(newVal) {
|
||||||
|
// console.log('断面', newVal);
|
||||||
|
// console.log('断面-triggerType', this.triggerType);
|
||||||
|
}
|
||||||
|
// immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleCommand(command) {
|
||||||
|
// 用户名下拉菜单选择事件
|
||||||
|
if (command == 'show') {
|
||||||
|
this.dialogVisible = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onSubmit() {},
|
||||||
|
handleClose() {}
|
||||||
|
},
|
||||||
|
mounted() {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
/deep/ .el-table {
|
||||||
|
// height: 709px !important;
|
||||||
|
// overflow-y: scroll;
|
||||||
|
z-index: 900;
|
||||||
|
}
|
||||||
|
.el-table::-webkit-scrollbar {
|
||||||
|
width: 0 !important;
|
||||||
|
}
|
||||||
|
.tableContent {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.down {
|
||||||
|
position: absolute;
|
||||||
|
top: -35px;
|
||||||
|
right: 5px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.down .moreIcon {
|
||||||
|
width: 5px;
|
||||||
|
height: 18px;
|
||||||
|
background-size: 5px 18px;
|
||||||
|
background-image: url(../../assets/img/more.png);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,217 @@
|
||||||
|
<template>
|
||||||
|
<div id="thermalChart" ref="thermalChart" style="width: 705px; height: 300px"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'thermalChart', //热点图组件
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
thermalChartData: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
props: {
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pageType: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
startEndData:{
|
||||||
|
type:Object,
|
||||||
|
default() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// status: {
|
||||||
|
// type: String
|
||||||
|
// },
|
||||||
|
// componentName: {
|
||||||
|
// type: String
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//处理od组件数据
|
||||||
|
ODhanlde(odData) {
|
||||||
|
// console.log(odData,'oddata');
|
||||||
|
// var odData = this.odData
|
||||||
|
var chartData = [];
|
||||||
|
var start = [];
|
||||||
|
if (odData && odData.length > 0) {
|
||||||
|
for (let i = 0; i < odData.length; i++) {
|
||||||
|
let item = odData[i].data;
|
||||||
|
if (item && item.length > 0) {
|
||||||
|
for (let j = 0; j < item.length; j++) {
|
||||||
|
start.push(item[j].start);
|
||||||
|
// 数组去重
|
||||||
|
|
||||||
|
// od图的数据
|
||||||
|
chartData.push([i, j, item[j].quantity]);
|
||||||
|
// console.log([i,j,item[j].val]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// this.thermalChartData = chartData
|
||||||
|
// console.log(chartData,'处理过后的odssssssssssssss');
|
||||||
|
return chartData;
|
||||||
|
// console.log(chartData, this.unique(start), 'od图的数据');
|
||||||
|
},
|
||||||
|
//数组去重
|
||||||
|
unique(arr) {
|
||||||
|
let newArr = [];
|
||||||
|
arr.forEach((item) => {
|
||||||
|
return newArr.includes(item) ? '' : newArr.push(item);
|
||||||
|
});
|
||||||
|
return newArr;
|
||||||
|
},
|
||||||
|
isObject(variable) {
|
||||||
|
return typeof variable === 'object' && variable !== null && !Array.isArray(variable);
|
||||||
|
},
|
||||||
|
// 绘制热力图
|
||||||
|
drawThermalChart(odData, startEnd) {
|
||||||
|
let startEndStart = [],
|
||||||
|
startEndEnd = [];
|
||||||
|
if (this.isObject(startEnd)) {
|
||||||
|
if (startEnd.start) {
|
||||||
|
startEndStart = startEnd.start.split(',');
|
||||||
|
}
|
||||||
|
if (startEnd.start) {
|
||||||
|
startEndEnd = startEnd.end.split(',');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let myChart = this.$echarts.init(this.$refs.thermalChart);
|
||||||
|
let option = {
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
id: 'dataZoomY',
|
||||||
|
type: 'slider',
|
||||||
|
yAxisIndex: [0],
|
||||||
|
startValue: 0,
|
||||||
|
endValue: 10,
|
||||||
|
filterMode: 'empty'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
position: 'top'
|
||||||
|
// formatter: function (params) {
|
||||||
|
// return (
|
||||||
|
// "学历：" + days[params.value[1]] + "<br/>" + "人数：" + params.data[2]
|
||||||
|
// );
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
animation: false,
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '8%',
|
||||||
|
bottom: '8%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: startEndStart,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
rotate: 40
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
// name: "镇街",
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: startEndEnd,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
rotate: 40
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
// name: "",
|
||||||
|
},
|
||||||
|
visualMap: {
|
||||||
|
min: 1,
|
||||||
|
max: 50,
|
||||||
|
calculable: true,
|
||||||
|
orient: 'horizontal',
|
||||||
|
left: 'center',
|
||||||
|
bottom: '1%',
|
||||||
|
text: ['50', '1'], // 文本，默认为数值文本
|
||||||
|
//color:['#20a0ff','#D2EDFF'],
|
||||||
|
calculable: false,
|
||||||
|
color: ['#22DDDD', '#fec42c', '#80F1BE']
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'OD图',
|
||||||
|
type: 'heatmap',
|
||||||
|
data: this.ODhanlde(odData),
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
emphasis: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowColor: 'rgba(120, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
if (myChart) {
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
// myChart.setOption(option)
|
||||||
|
// myChart.resize();
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.drawThermalChart()
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
list: {
|
||||||
|
handler: function (newval, oldVal) {
|
||||||
|
if (newval && newval.length > 0) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.drawThermalChart(newval[0].ob_data,this.startEndData);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
// immediate: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.a{
|
||||||
|
color: rgba(120, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -97,10 +97,10 @@ export default {
|
||||||
if(seriesData&&seriesData.length>0){
|
if(seriesData&&seriesData.length>0){
|
||||||
let temp=[];
|
let temp=[];
|
||||||
seriesData.forEach((ele) => {
|
seriesData.forEach((ele) => {
|
||||||
if (ele.value != 0) {
|
// if (ele.value != 0) {
|
||||||
ele.name = getNameFromTargetType(ele.name);
|
ele.name = getNameFromTargetType(ele.name);
|
||||||
temp.push(ele)
|
temp.push(ele)
|
||||||
}
|
// }
|
||||||
})
|
})
|
||||||
seriesData = temp
|
seriesData = temp
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -65,64 +65,71 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initEcharts() {
|
initEcharts() {
|
||||||
this.max = [];
|
// this.max = [];
|
||||||
this.min = [];
|
// this.min = [];
|
||||||
this.med = [];
|
// this.med = [];
|
||||||
this.avg = [];
|
// this.avg = [];
|
||||||
// console.log("均值图",arr)
|
// // console.log("均值图",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);
|
||||||
|
// // }
|
||||||
|
// // this.dataProcessing(this.dataList);
|
||||||
|
// if (this.dataList.length > 10) {
|
||||||
|
// this.dataList = this.dataList.slice(-10);
|
||||||
// }
|
// }
|
||||||
// this.dataProcessing(this.dataList);
|
// for (let i = 0; i < this.dataList.length; i++) {
|
||||||
if (this.dataList.length > 10) {
|
// if (this.dataList[i].max) {
|
||||||
this.dataList = this.dataList.slice(-10);
|
|
||||||
}
|
|
||||||
for (let i = 0; i < this.dataList.length; i++) {
|
|
||||||
if (this.dataList[i].max) {
|
|
||||||
this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
|
|
||||||
} else {
|
|
||||||
this.max.push(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.dataList[i].min) {
|
|
||||||
this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
|
|
||||||
} else {
|
|
||||||
this.min.push(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.dataList[i].med) {
|
|
||||||
this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
|
|
||||||
} else {
|
|
||||||
this.med.push(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.dataList[i].avg) {
|
|
||||||
this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
|
|
||||||
} else {
|
|
||||||
this.avg.push(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
// this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
|
// this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
|
||||||
|
// } else {
|
||||||
|
// this.max.push(0);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (this.dataList[i].min) {
|
||||||
// this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
|
// this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
|
||||||
|
// } else {
|
||||||
|
// this.min.push(0);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (this.dataList[i].med) {
|
||||||
// this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
|
// this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
|
||||||
|
// } else {
|
||||||
|
// this.med.push(0);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (this.dataList[i].avg) {
|
||||||
// this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
|
// this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
|
||||||
}
|
// } else {
|
||||||
|
// this.avg.push(0);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
|
||||||
|
// // this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
|
||||||
|
// // this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
|
||||||
|
// // this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
|
||||||
|
// }
|
||||||
let maxData = '';
|
let maxData = '';
|
||||||
let minData = '';
|
let minData = '';
|
||||||
let medData = '';
|
let medData = '';
|
||||||
let avgData = '';
|
let avgData = '';
|
||||||
for (let i = 0; i < this.max.length; i++) {
|
// for (let i = 0; i < this.max.length; i++) {
|
||||||
maxData = this.max[i];
|
// maxData = this.max[i];
|
||||||
}
|
// }
|
||||||
for (let i = 0; i < this.min.length; i++) {
|
// for (let i = 0; i < this.min.length; i++) {
|
||||||
minData = this.min[i];
|
// minData = this.min[i];
|
||||||
}
|
// }
|
||||||
for (let i = 0; i < this.med.length; i++) {
|
// for (let i = 0; i < this.med.length; i++) {
|
||||||
medData = this.med[i];
|
// medData = this.med[i];
|
||||||
}
|
// }
|
||||||
for (let i = 0; i < this.avg.length; i++) {
|
// for (let i = 0; i < this.avg.length; i++) {
|
||||||
avgData = this.avg[i];
|
// avgData = this.avg[i];
|
||||||
|
// }
|
||||||
|
let arr = this.dataList[0]||{}
|
||||||
|
if (arr && Object.keys(arr).length > 0) {
|
||||||
|
avgData = arr.avg ? Math.abs(arr.avg).toFixed(2) : 0;
|
||||||
|
medData = arr.med ? Math.abs(arr.med).toFixed(2) : 0;
|
||||||
|
maxData = arr.max ? Math.abs(arr.max).toFixed(2) : 0;
|
||||||
|
minData = arr.min ? Math.abs(arr.min).toFixed(2) : 0;
|
||||||
}
|
}
|
||||||
let myChart = this.chart;
|
let myChart = this.chart;
|
||||||
let chartData = [{ stage: '', number: 40 }];
|
let chartData = [{ stage: '', number: 40 }];
|
||||||
|
|
@ -310,45 +317,51 @@ export default {
|
||||||
}, 300);
|
}, 300);
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
intersectionName: {
|
// intersectionName: {
|
||||||
handler: function (oldValues, newValues) {
|
// handler: function (oldValues, newValues) {
|
||||||
this.$nextTick(() => {
|
// this.$nextTick(() => {
|
||||||
this.initEcharts();
|
// this.initEcharts();
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
chatShowType: {
|
// chatShowType: {
|
||||||
handler: function (oldValues, newValues) {
|
// handler: function (oldValues, newValues) {
|
||||||
let that = this;
|
// let that = this;
|
||||||
setTimeout(() => {
|
// setTimeout(() => {
|
||||||
that.$nextTick(() => {
|
// that.$nextTick(() => {
|
||||||
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
// this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||||
if (this.chart == null) {
|
// if (this.chart == null) {
|
||||||
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
// this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||||
}
|
// }
|
||||||
that.initEcharts();
|
// that.initEcharts();
|
||||||
});
|
// });
|
||||||
}, 300);
|
// }, 300);
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
echartsRef: {
|
// echartsRef: {
|
||||||
handler: function (oldValues, newValues) {
|
// handler: function (newValues, oldValues) {
|
||||||
console.log('old', oldValues);
|
// console.log('old', oldValues);
|
||||||
console.log('newV', newValues);
|
// console.log('newV', newValues);
|
||||||
let that = this;
|
// let that = this;
|
||||||
setTimeout(() => {
|
// setTimeout(() => {
|
||||||
that.$nextTick(() => {
|
// that.$nextTick(() => {
|
||||||
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
// this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||||
if (this.chart == null) {
|
// if (this.chart == null) {
|
||||||
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
// this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||||
}
|
// }
|
||||||
that.initEcharts();
|
// that.initEcharts();
|
||||||
});
|
// });
|
||||||
}, 300);
|
// }, 300);
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
dataList: {
|
dataList: {
|
||||||
handler: function (oldValues, newValues) {
|
handler: function (newValues, oldValues) {
|
||||||
|
// if(newValues&&newValues.length>0) {
|
||||||
|
// if(newValues[0].name=='gate1'){
|
||||||
|
// console.log('newV', newValues);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||||
if (this.chart == null) {
|
if (this.chart == null) {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,404 @@
|
||||||
|
<template>
|
||||||
|
<!-- 触发类型 -->
|
||||||
|
<div class="setion">
|
||||||
|
<!-- <p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p> -->
|
||||||
|
<!-- 触发数据数值渲染 -->
|
||||||
|
<div class="typeContent">
|
||||||
|
<div v-if="newDataArr && newDataArr.length > 0">
|
||||||
|
<div v-if="title == '类型'" style="display: flex; flex-wrap: wrap">
|
||||||
|
<el-card
|
||||||
|
v-for="(n, i) in latestDataArr.type_data"
|
||||||
|
:key="i"
|
||||||
|
style="width: 150px; margin-bottom: 20px; text-align: center"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<span style="font-size: 15px">{{ getNameFromTargetType(n.name) }}</span
|
||||||
|
><br />
|
||||||
|
<span style="font-size: 30px; font-weight: bold">{{
|
||||||
|
n.quantity || n.quantity === 0 ? n.quantity : ' - '
|
||||||
|
}}</span>
|
||||||
|
<span style="font-size: 15px" v-if="n.quantity || n.quantity === 0"> 个</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
{{ latestDataArr.time ? latestDataArr.time : '' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-card v-show="echartArr.includes('数值')" class="spacialCard">
|
||||||
|
<div v-if="newDataArr && newDataArr.length > 0">
|
||||||
|
<div v-if="title == '类型'">
|
||||||
|
<span style="font-size: 15px">类型数量总和</span><br />
|
||||||
|
<span style="font-size: 30px; font-weight: bold">
|
||||||
|
{{ getTotal(newDataArr) }}
|
||||||
|
</span>
|
||||||
|
<span style="font-size: 15px">个</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 30px; font-weight: bold" v-if="title == '速度' && dataArr && dataArr.length > 0">
|
||||||
|
<span style="font-size: 15px">速度</span><br />
|
||||||
|
|
||||||
|
<!-- <span style="font-size: 30px; font-weight: bold">{{ typeValue.speed }}</span> -->
|
||||||
|
<span style="font-size: 30px; font-weight: bold">
|
||||||
|
<span v-if="(latestDataArr.speed && latestDataArr.speed != -1) || latestDataArr.speed === 0">
|
||||||
|
{{ Math.abs(latestDataArr.speed) }}
|
||||||
|
</span>
|
||||||
|
<span v-else> - </span>
|
||||||
|
</span>
|
||||||
|
<span style="font-size: 20px; font-weight: 200">
|
||||||
|
<span v-if="(latestDataArr.speed && latestDataArr.speed != -1) || latestDataArr.speed === 0">
|
||||||
|
{{ latestDataArr.speed > 0 || latestDataArr.speed === 0 ? 'km/h' : 'pix/s' }}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 30px; font-weight: bold" v-if="title == '流量' && dataArr && dataArr.length > 0">
|
||||||
|
<span style="font-size: 15px">流量</span><br />
|
||||||
|
<span style="font-size: 30px; font-weight: bold" v-if="itemData.flowType && itemData.flowType == '出流'">{{
|
||||||
|
latestDataArr.out_flow || latestDataArr.out_flow === 0 ? latestDataArr.out_flow : ' - '
|
||||||
|
}}</span>
|
||||||
|
<span style="font-size: 30px; font-weight: bold" v-if="itemData.flowType && itemData.flowType == '入流'">{{
|
||||||
|
latestDataArr.in_flow || latestDataArr.in_flow === 0 ? latestDataArr.in_flow : ' - '
|
||||||
|
}}</span>
|
||||||
|
<span style="font-size: 20px; font-weight: 200">辆</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 30px; font-weight: bold" v-if="title == '车头时距'">
|
||||||
|
<span style="font-size: 15px">车头时距</span><br />
|
||||||
|
<span style="font-size: 30px; font-weight: bold">{{
|
||||||
|
latestDataArr.headway || latestDataArr.headway === 0
|
||||||
|
? latestDataArr.headway == -1
|
||||||
|
? ' - '
|
||||||
|
: latestDataArr.headway
|
||||||
|
: ' - '
|
||||||
|
}}</span>
|
||||||
|
<!-- <span style="font-size: 30px; font-weight: bold">100</span> -->
|
||||||
|
<span style="font-size: 20px; font-weight: 200">秒</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 30px; font-weight: bold" v-if="title == '排队数'">
|
||||||
|
<span style="font-size: 15px">排队数</span><br />
|
||||||
|
<span style="font-size: 30px; font-weight: bold">
|
||||||
|
{{
|
||||||
|
latestDataArr.n_queue || latestDataArr.n_queue === 0
|
||||||
|
? latestDataArr.n_queue == -1
|
||||||
|
? ' - '
|
||||||
|
: latestDataArr.n_queue
|
||||||
|
: ' - '
|
||||||
|
}}
|
||||||
|
</span>
|
||||||
|
<span style="font-size: 20px; font-weight: 200">辆</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 30px; font-weight: bold" v-if="title == '检测数'">
|
||||||
|
<span style="font-size: 15px">检测数</span><br />
|
||||||
|
<span style="font-size: 30px; font-weight: bold">{{
|
||||||
|
latestDataArr.n_stay || latestDataArr.n_stay === 0 ? latestDataArr.n_stay : ' - '
|
||||||
|
}}</span>
|
||||||
|
<span style="font-size: 20px; font-weight: 200">辆</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 30px; font-weight: bold" v-if="title == '延误'">
|
||||||
|
<span style="font-size: 15px">延误</span><br />
|
||||||
|
<span style="font-size: 30px; font-weight: bold">{{
|
||||||
|
latestDataArr.ave_delay || latestDataArr.ave_delay === 0 ? latestDataArr.ave_delay : ' - '
|
||||||
|
}}</span>
|
||||||
|
<span style="font-size: 20px; font-weight: 200">秒</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div v-if="latestDataArr.time">
|
||||||
|
<!-- {{ latestDataArr.time ? latestDataArr.time : '' }} -->
|
||||||
|
<div>{{ latestDataArr.time.slice(0, 11) }}</div>
|
||||||
|
<div>{{ latestDataArr.time.slice(11) }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<el-empty :image-size="100"></el-empty>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
<div v-show="echartArr.includes('表格')">
|
||||||
|
<div class="tableTitle" v-if="newDataArr && newDataArr.length > 0">
|
||||||
|
<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 + '-' + '表格' + '-' + triggerType }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="tableTime">
|
||||||
|
{{ newDataArr[0].time ? newDataArr[0].time : '' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
|
||||||
|
<tableShow :msg="newDataArrAbs" :triggerType="triggerType" />
|
||||||
|
</div>
|
||||||
|
<div v-if="pageType == '区域'">
|
||||||
|
<regionTable :msg="newDataArrAbs" :triggerType="triggerType" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border" v-if="echartArr.includes('曲线图')">
|
||||||
|
<detailDialog />
|
||||||
|
<lineChart
|
||||||
|
:componentName="componentName"
|
||||||
|
:itemData="itemData"
|
||||||
|
:originalDataArr="newDataArr"
|
||||||
|
:chartName="chartName"
|
||||||
|
:pageType="pageType"
|
||||||
|
:list="newDataArrAbs"
|
||||||
|
:status="triggerType"
|
||||||
|
:title="title"
|
||||||
|
:typeValue="typeValue"
|
||||||
|
ref="lineChartRef"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="border" v-if="echartArr.includes('饼状图')">
|
||||||
|
<detailDialog />
|
||||||
|
<pieChart
|
||||||
|
:componentName="componentName"
|
||||||
|
:chartName="chartName"
|
||||||
|
:pageType="pageType"
|
||||||
|
:list="newDataArrAbs"
|
||||||
|
:status="triggerType"
|
||||||
|
:title="title"
|
||||||
|
:typeValue="typeValue"
|
||||||
|
ref="pieChartRef"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="border" v-if="echartArr.includes('均值图')">
|
||||||
|
<detailDialog />
|
||||||
|
<avgChart
|
||||||
|
ref="avgChartRef"
|
||||||
|
:componentName="componentName"
|
||||||
|
:chartName="chartName"
|
||||||
|
:pageType="pageType"
|
||||||
|
:list="newDataArrAbs"
|
||||||
|
:status="triggerType"
|
||||||
|
:title="title"
|
||||||
|
:typeValue="typeValue"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="border" v-if="echartArr.includes('直方图')">
|
||||||
|
<detailDialog />
|
||||||
|
<barChart
|
||||||
|
:componentName="componentName"
|
||||||
|
:chartName="chartName"
|
||||||
|
:pageType="pageType"
|
||||||
|
:list="newDataArrAbs"
|
||||||
|
:status="triggerType"
|
||||||
|
:title="title"
|
||||||
|
:typeValue="typeValue"
|
||||||
|
ref="barChartRef"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="border" v-if="echartArr.includes('矩阵图')">
|
||||||
|
<detailDialog />
|
||||||
|
<thermalChart
|
||||||
|
:componentName="componentName"
|
||||||
|
:pageType="pageType"
|
||||||
|
:list="newDataArrAbs"
|
||||||
|
:status="triggerType"
|
||||||
|
:title="title"
|
||||||
|
:typeValue="typeValue"
|
||||||
|
:startEndData="startEndData"
|
||||||
|
ref="ODChartRef"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import _ from 'lodash';
|
||||||
|
import avgChart from '../newchart/avgChart.vue';
|
||||||
|
import lineChart from '../newchart/lineChart.vue';
|
||||||
|
import barChart from '../newchart/barChart.vue';
|
||||||
|
import tableShow from '../newchart/tableShow.vue';
|
||||||
|
import pieChart from '../newchart/pieChart.vue';
|
||||||
|
import detailDialog from '../newchart/detailDialog.vue';
|
||||||
|
import regionTable from '../newchart/regionTable.vue';
|
||||||
|
import thermalChart from '../newchart/thermalChart.vue';
|
||||||
|
import { getNameFromTargetType } from '@/utils/targetType';
|
||||||
|
export default {
|
||||||
|
name: 'typeChart', //类型组件
|
||||||
|
props: [
|
||||||
|
'typeValue',
|
||||||
|
'itemData',
|
||||||
|
'pageType',
|
||||||
|
'triggerType',
|
||||||
|
'dataArr',
|
||||||
|
'cycleAccumulateData',
|
||||||
|
'echartArr',
|
||||||
|
'componentName',
|
||||||
|
'title',
|
||||||
|
'chartName',
|
||||||
|
'startEndData'
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
lineChart,
|
||||||
|
barChart,
|
||||||
|
tableShow,
|
||||||
|
detailDialog,
|
||||||
|
regionTable,
|
||||||
|
pieChart,
|
||||||
|
avgChart,
|
||||||
|
thermalChart
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
getNameFromTargetType
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
methods: {
|
||||||
|
// 计算类型数量的总和
|
||||||
|
// getDataArr(val) {
|
||||||
|
// this.newDataArr = val;
|
||||||
|
// this.getNewQueue(this.newDataArr);
|
||||||
|
// },
|
||||||
|
getTotal(dataArr) {
|
||||||
|
if (this.title == '类型') {
|
||||||
|
if (dataArr && dataArr.length > 0) {
|
||||||
|
if (dataArr[0].type_data && dataArr[0].type_data.length > 0) {
|
||||||
|
return dataArr[0].type_data.reduce(function (prev, cur) {
|
||||||
|
return cur.quantity + prev;
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
latestDataArr() {
|
||||||
|
//最新一条数据
|
||||||
|
if (this.dataArr && this.dataArr.length > 0) {
|
||||||
|
let latestDataArr = _.cloneDeep(this.dataArr[0]);
|
||||||
|
return latestDataArr;
|
||||||
|
}
|
||||||
|
if (this.cycleAccumulateData && this.cycleAccumulateData.length > 0) {
|
||||||
|
let latestDataArr = _.cloneDeep(this.cycleAccumulateData[0]);
|
||||||
|
return latestDataArr;
|
||||||
|
}
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
newDataArr() {
|
||||||
|
if (this.dataArr && this.dataArr.length > 0) {
|
||||||
|
let dataArr = _.cloneDeep(this.dataArr);
|
||||||
|
return dataArr;
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
// 处理数据图表数据-1需要改成‘-’
|
||||||
|
newDataArrAbs() {
|
||||||
|
// console.log('newDataArrAbs1', this.newDataArr);
|
||||||
|
let arr = [];
|
||||||
|
if (this.newDataArr.length > 0) {
|
||||||
|
let newlist = JSON.parse(JSON.stringify(this.newDataArr));
|
||||||
|
for (const item of newlist) {
|
||||||
|
if (!isNaN(item.speed) && (item.speed !== -1 || item.speed === 0)) {
|
||||||
|
item.speed = Math.abs(item.speed);
|
||||||
|
} else {
|
||||||
|
item.speed = '-';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isNaN(item.flow) && (item.headway !== -1 || item.headway === 0)) {
|
||||||
|
item.flow = item.flow;
|
||||||
|
} else {
|
||||||
|
item.flow = '-';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isNaN(item.headway) && (item.headway !== -1 || item.headway === 0)) {
|
||||||
|
item.headway = item.headway;
|
||||||
|
} else {
|
||||||
|
item.headway = '-';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isNaN(item.n_stay) && (item.n_stay !== -1 || item.n_stay === 0)) {
|
||||||
|
item.n_stay = item.n_stay;
|
||||||
|
} else {
|
||||||
|
item.n_stay = '-';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isNaN(item.n_queue) && (item.n_queue !== -1 || item.n_queue === 0)) {
|
||||||
|
item.n_queue = item.n_queue;
|
||||||
|
} else {
|
||||||
|
item.n_queue = '-';
|
||||||
|
}
|
||||||
|
if (!isNaN(item.ave_queue) && (item.ave_queue !== -1 || item.ave_queue === 0)) {
|
||||||
|
item.n_queue = item.ave_queue;
|
||||||
|
} else {
|
||||||
|
item.ave_queue = '-';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isNaN(item.ave_delay) && (item.ave_delay !== -1 || item.ave_delay === 0)) {
|
||||||
|
item.ave_delay = item.ave_delay;
|
||||||
|
} else {
|
||||||
|
item.ave_delay = '-';
|
||||||
|
}
|
||||||
|
if (!isNaN(item.in_spd) && (item.in_spd !== -1 || item.in_spd === 0)) {
|
||||||
|
item.in_spd = item.in_spd;
|
||||||
|
} else {
|
||||||
|
item.in_spd = '-';
|
||||||
|
}
|
||||||
|
if (!isNaN(item.out_spd) && (item.out_spd !== -1 || item.out_spd === 0)) {
|
||||||
|
item.out_spd = item.out_spd;
|
||||||
|
} else {
|
||||||
|
item.out_spd = '-';
|
||||||
|
}
|
||||||
|
arr.push(Object.assign({}, item));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// console.log('triggerType',this.triggerType)
|
||||||
|
// console.log('newDataArrAbs2', arr);
|
||||||
|
return arr;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
watch: {
|
||||||
|
// 监听触发数据
|
||||||
|
// dataArr: {
|
||||||
|
// handler(newVal) {
|
||||||
|
// console.log('newtypeChart', newVal);
|
||||||
|
// // if (newVal &&newVal.length >0) {
|
||||||
|
// // this.getNewQueue(newVal);
|
||||||
|
// // }
|
||||||
|
// },
|
||||||
|
// immediate: true,
|
||||||
|
// deep:true,
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.spacialCard {
|
||||||
|
width: 150px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep.spacialCard .el-card__body {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableTitle {
|
||||||
|
background: #f7f8fa;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typeContent {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -14,7 +14,6 @@
|
||||||
<p class="board-title">
|
<p class="board-title">
|
||||||
<span>{{ s.title }}</span>
|
<span>{{ s.title }}</span>
|
||||||
</p>
|
</p>
|
||||||
<!-- <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span> -->
|
|
||||||
</div>
|
</div>
|
||||||
<el-tabs>
|
<el-tabs>
|
||||||
<el-collapse v-model="acticveName" @change="handleChange">
|
<el-collapse v-model="acticveName" @change="handleChange">
|
||||||
|
|
@ -22,7 +21,7 @@
|
||||||
<div class="titleGnag"></div>
|
<div class="titleGnag"></div>
|
||||||
<el-collapse-item :title="o.componentName + o.timeMode" :name="o.analogAreaComponentId">
|
<el-collapse-item :title="o.componentName + o.timeMode" :name="o.analogAreaComponentId">
|
||||||
<!--触发的组件 -->
|
<!--触发的组件 -->
|
||||||
<typeChart
|
<newtypeChart
|
||||||
ref="typeChartRef"
|
ref="typeChartRef"
|
||||||
v-if="o.timeMode === '实时触发'"
|
v-if="o.timeMode === '实时触发'"
|
||||||
:itemData="o"
|
:itemData="o"
|
||||||
|
|
@ -36,7 +35,7 @@
|
||||||
:typeValue="typeTimeMode"
|
:typeValue="typeTimeMode"
|
||||||
:startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
|
:startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
|
||||||
/>
|
/>
|
||||||
<typeChart
|
<newtypeChart
|
||||||
ref="typeChartRef1"
|
ref="typeChartRef1"
|
||||||
v-if="o.timeMode === '固定时刻'"
|
v-if="o.timeMode === '固定时刻'"
|
||||||
:itemData="o"
|
:itemData="o"
|
||||||
|
|
@ -52,7 +51,7 @@
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 固定间隔的组件 -->
|
<!-- 固定间隔的组件 -->
|
||||||
<typeChart
|
<newtypeChart
|
||||||
ref="typeChartRef2"
|
ref="typeChartRef2"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
v-if="o.timeMode === '固定间隔'"
|
v-if="o.timeMode === '固定间隔'"
|
||||||
|
|
@ -61,6 +60,7 @@
|
||||||
:triggerType="o.timeMode"
|
:triggerType="o.timeMode"
|
||||||
:componentName="o.componentName"
|
:componentName="o.componentName"
|
||||||
:dataArr="o.cycleStatisticsData"
|
:dataArr="o.cycleStatisticsData"
|
||||||
|
:cycleAccumulateData="o.cycleAccumulateData"
|
||||||
:echartArr="o.presentationForm"
|
:echartArr="o.presentationForm"
|
||||||
:title="o.componentName.split('_')[0]"
|
:title="o.componentName.split('_')[0]"
|
||||||
:chartName="o.combinationName"
|
:chartName="o.combinationName"
|
||||||
|
|
@ -81,12 +81,13 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import typeChart from '../../components/target/typeChart.vue';
|
import newtypeChart from '../../components/target/newtypeChart.vue';
|
||||||
// import {mapMutation} from 'vuex'
|
// import {mapMutation} from 'vuex'
|
||||||
import { getComponentSection } from '../../api/index';
|
import { getComponentSection } from '../../api/index';
|
||||||
|
import { update } from '../../api/aboutMachine';
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
typeChart
|
newtypeChart
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
activeName: {
|
activeName: {
|
||||||
|
|
@ -138,46 +139,35 @@ export default {
|
||||||
return {
|
return {
|
||||||
loading: false,
|
loading: false,
|
||||||
acticveName: [],
|
acticveName: [],
|
||||||
title1: '01断面',
|
|
||||||
title2: '01区域',
|
|
||||||
dialogVisible: false,
|
|
||||||
|
|
||||||
idVal: '',
|
|
||||||
//组件数组
|
//组件数组
|
||||||
componentList: [],
|
componentList: [],
|
||||||
// 触发数据数组
|
// 触发数据数组
|
||||||
triggerList: [],
|
triggerList: [],
|
||||||
|
|
||||||
sectionData: [],
|
sectionData: [],
|
||||||
|
|
||||||
// 单个区域或者断面的表格触发数据
|
|
||||||
tableList: [],
|
|
||||||
|
|
||||||
// 路线数据
|
|
||||||
headWay: [],
|
|
||||||
|
|
||||||
tripData: [],
|
|
||||||
|
|
||||||
sectionArr: [],
|
sectionArr: [],
|
||||||
|
|
||||||
//触发的类型数值看板显示
|
//触发的类型数值看板显示
|
||||||
typeTimeMode: {},
|
// "type_data":[{//类型数据，只供类型组件使用，只有组件类型为类型的时候，这个字段才有值
|
||||||
// 固定时刻的数值看板展示
|
// "name":"electric bicycle",//类型名称
|
||||||
typeCycleTimeData: {},
|
// "quantity":0//数量
|
||||||
typeCycleStatistics: {},
|
// }],
|
||||||
|
// "ob_data":[{//od数据，只供od组件使用，只有组件类型为OD的时候，这个字段才有值
|
||||||
|
// "end":"gate1",
|
||||||
|
// "data":[{
|
||||||
|
// "start":"zone1",
|
||||||
|
// "quantity":0
|
||||||
|
// }]
|
||||||
|
// }]
|
||||||
|
typeTimeMode: {}, //实时触发类型数据，只供类型组件使用，只有组件类型为类型的时候，这个字段才有值，目前用不到，typeChart组件是直接拿的dataArr[0]来展示的
|
||||||
|
typeCycleTimeData: {}, // 固定时刻的数值看板展示-类型数据，目前用不到，typeChart组件是直接拿的dataArr[0]来展示的
|
||||||
|
typeCycleStatistics: {}, //固定间隔的数值看板展示-类型数据，目前用不到，typeChart组件是直接拿的dataArr[0]来展示的
|
||||||
|
|
||||||
// 各个组件分类
|
// 各个组件分类
|
||||||
classify: []
|
classify: []
|
||||||
// cycleHistoryData:''
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
// beforeCeated(){
|
created() {},
|
||||||
|
|
||||||
// },
|
|
||||||
created() {
|
|
||||||
// this.getNew()
|
|
||||||
// //console.log("cycleHistoryData",this.cycleHistoryData)
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
// 手风琴下拉切换
|
// 手风琴下拉切换
|
||||||
handleChange(val) {
|
handleChange(val) {
|
||||||
|
|
@ -188,24 +178,27 @@ export default {
|
||||||
// });
|
// });
|
||||||
// }, 3000);
|
// }, 3000);
|
||||||
},
|
},
|
||||||
|
//点击数据看板tab会执行获取所有配置的组件
|
||||||
getNew() {
|
getNew() {
|
||||||
// this.idVal = ;
|
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
getComponentSection({ VideoId: this.$route.query.id, Number: 10 }).then((res) => {
|
getComponentSection({ VideoId: this.$route.query.id, Number: 10 })
|
||||||
|
.then((res) => {
|
||||||
if (res.data.code == 200) {
|
if (res.data.code == 200) {
|
||||||
//console.log(res.data.data, '组件的数据');
|
//console.log(res.data.data, '组件的数据');
|
||||||
this.componentList = res.data.data;
|
this.componentList = res.data.data;
|
||||||
this.siftData();
|
this.siftData();
|
||||||
}
|
}
|
||||||
}).finally(()=>{
|
})
|
||||||
|
.finally(() => {
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
//组件数据根据分类重组到相同分类下
|
||||||
siftData() {
|
siftData() {
|
||||||
|
//获取分类
|
||||||
this.sectionArr = [];
|
this.sectionArr = [];
|
||||||
this.sectionData = [];
|
this.sectionData = [];
|
||||||
this.classify = [];
|
// this.classify = []; //通过相同赋值来改变sectionData里面children数据的改变不太合理，所以这边不用了
|
||||||
this.componentList.forEach((val) => {
|
this.componentList.forEach((val) => {
|
||||||
// //console.log("val",val)
|
// //console.log("val",val)
|
||||||
this.sectionArr.push(val.combinationName);
|
this.sectionArr.push(val.combinationName);
|
||||||
|
|
@ -213,697 +206,145 @@ export default {
|
||||||
});
|
});
|
||||||
this.sectionData = this.sectionArr.map((item) => {
|
this.sectionData = this.sectionArr.map((item) => {
|
||||||
item = { title: item, children: [] };
|
item = { title: item, children: [] };
|
||||||
this.acticveName = [];
|
this.acticveName = []; //存储collapse组件的展开，默认全部收缩
|
||||||
this.componentList.forEach((val) => {
|
this.componentList.forEach((val) => {
|
||||||
if (item.title == val.combinationName) {
|
if (item.title == val.combinationName) {
|
||||||
this.classify.push(val);
|
// this.classify.push(val);
|
||||||
|
//trigger 为实时触发存储的数据，cycleTimeData为固定时刻存储的数据，cycleStatisticsData为固定间隔存储的数据
|
||||||
|
//在接口返回的componentList组件中没有trigger字段
|
||||||
|
if (!val.trigger) {
|
||||||
|
val.trigger = [];
|
||||||
|
}
|
||||||
|
//固定间隔还有个周期统计实时累计数据主题
|
||||||
|
if (!val.cycleAccumulateData) {
|
||||||
|
val.cycleAccumulateData = [];
|
||||||
|
}
|
||||||
item.children.push(val);
|
item.children.push(val);
|
||||||
if (val.timeMode == '固定间隔' || this.cycleStatisticsData.length == 0) {
|
//把cycleStatisticsData，cycleTimeData存给children同级别暂时没理解为啥怎么做
|
||||||
item.cycleStatisticsData = val.cycleStatisticsData;
|
// if (val.timeMode == '固定间隔' || this.cycleStatisticsData.length == 0) {
|
||||||
|
// item.cycleStatisticsData = val.cycleStatisticsData;
|
||||||
|
// }
|
||||||
|
// if (val.timeMode == '固定时刻' || this.cycleTimeData.length == 0) {
|
||||||
|
// item.cycleTimeData = val.cycleTimeData;
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
if (val.timeMode == '固定时刻' || this.cycleTimeData.length == 0) {
|
// this.acticveName.push(val.analogAreaComponentId);
|
||||||
item.cycleTimeData = val.cycleTimeData;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.acticveName.push([val.analogAreaComponentId]);
|
|
||||||
});
|
});
|
||||||
return item;
|
return item;
|
||||||
});
|
});
|
||||||
|
// console.log('折叠面板-', this.acticveName);
|
||||||
},
|
},
|
||||||
// 组件图标点击下拉事件
|
updateSectionData(newVal, updateKey, timeMode) {
|
||||||
sectionHandle(i) {
|
this.sectionData.forEach((item) => {
|
||||||
// let sections = document.querySelectorAll('.section');
|
//item.title == val.combinationName
|
||||||
let sectionBox = document.querySelectorAll('.sectionBox');
|
if (item.children && item.children.length > 0) {
|
||||||
let downPulls1 = document.querySelectorAll('.downPull1');
|
item.children.forEach((cItem) => {
|
||||||
// 断面的小图标
|
if (cItem.timeMode == timeMode) {
|
||||||
downPulls1[i].dataset.num++;
|
//找出对应timeMode的mqtt数据
|
||||||
if (downPulls1[i].dataset.num % 2 == 0) {
|
newVal.forEach((nItem) => {
|
||||||
downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';
|
if (cItem.analogAreaComponentId == nItem.component_id) {
|
||||||
// sections[i].style.height = 'auto';
|
if (cItem[updateKey].length > 9) {
|
||||||
if (sectionBox[i] != undefined) {
|
this.$set(cItem, updateKey, cItem[updateKey].slice(0, 9));
|
||||||
// sectionBox[i].style.height = 'auto';
|
|
||||||
}
|
}
|
||||||
|
//这里逻辑不知道为啥这样处理time，用的原逻辑
|
||||||
|
if (this.$route.query.type == '离线视频') {
|
||||||
|
var timeNew = nItem.time.split('.')[0];
|
||||||
|
var dateLength = timeNew.length;
|
||||||
|
var key = timeNew.substring(dateLength - 8, dateLength);
|
||||||
|
nItem.time = key;
|
||||||
} else {
|
} else {
|
||||||
downPulls1[i].style.cssText = 'transition: all 0.5s linear;';
|
nItem.time = nItem.time.split('.')[0];
|
||||||
// sections[i].style.height = '500px';
|
|
||||||
if (sectionBox[i] != undefined) {
|
|
||||||
}
|
}
|
||||||
|
// cItem[updateKey].unshift(nItem);
|
||||||
|
this.$set(cItem, updateKey, [nItem, ...cItem[updateKey]]);
|
||||||
}
|
}
|
||||||
},
|
});
|
||||||
|
|
||||||
// 触发数据的类型数值
|
|
||||||
|
|
||||||
//循环方法
|
|
||||||
getRef(data, timeMode) {
|
|
||||||
for (let i = 0; i < data.length; i++) {
|
|
||||||
let refItem = data[i];
|
|
||||||
if (data.length != 0 && refItem.dataArr && refItem.dataArr.length > 0) {
|
|
||||||
if (refItem.echartArr.includes('时间曲线图')) {
|
|
||||||
refItem.$refs.lineChartRef.drawLine(refItem.dataArr, refItem.componentName.split('_')[0], timeMode);
|
|
||||||
}
|
}
|
||||||
if (refItem.echartArr.includes('数值')) {
|
});
|
||||||
refItem.getDataArr(refItem.dataArr);
|
|
||||||
}
|
}
|
||||||
if (refItem.echartArr.includes('表格')) {
|
});
|
||||||
refItem.getDataArr(refItem.dataArr);
|
this.$forceUpdate();
|
||||||
|
// console.log('sectionData', this.sectionData);
|
||||||
}
|
}
|
||||||
if (refItem.echartArr.includes('直方图') && refItem.$refs.barChartRef.drawBar) {
|
|
||||||
// 数据改变重新渲染柱状图
|
|
||||||
refItem.$refs.barChartRef.drawBar(refItem.dataArr[0]);
|
|
||||||
}
|
|
||||||
if (refItem.echartArr.includes('饼状图') && refItem.$refs.pieChartRef.drawPie) {
|
|
||||||
// 数据改变重新渲染饼图
|
|
||||||
refItem.$refs.pieChartRef.drawPie(refItem.dataArr[0]);
|
|
||||||
}
|
|
||||||
if (refItem.echartArr.includes('均值图') && refItem.$refs.avgChartRef != undefined) {
|
|
||||||
refItem.$refs.avgChartRef.drawBar(refItem.dataArr[0]);
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
refItem.componentName.includes('OD') &&
|
|
||||||
refItem.$refs.ODChartRef != undefined &&
|
|
||||||
refItem.dataArr[0].ob_data &&
|
|
||||||
refItem.dataArr[0].ob_data.length != 0
|
|
||||||
) {
|
|
||||||
refItem.$refs.ODChartRef.drawThermalChart(refItem.dataArr[0].ob_data, refItem.startEndData);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//处理离线视频历史数据
|
|
||||||
changecycleHistoryData() {}
|
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
watch: {
|
watch: {
|
||||||
// 触发的原始数据
|
// 触发的原始数据 作用是给3d那边，界面不需要展示
|
||||||
triggerData: {
|
// triggerData: {
|
||||||
handler(newVal, oldVal) {},
|
// handler(newVal, oldVal) {},
|
||||||
immediate: true
|
// immediate: true
|
||||||
},
|
// },
|
||||||
componentList: {
|
//离线历史数据
|
||||||
handler(newVal) {
|
|
||||||
//console.log('componentList', newVal);
|
|
||||||
|
|
||||||
if (newVal != undefined && newVal.length != 0) {
|
|
||||||
newVal.forEach((ele) => {
|
|
||||||
if (ele.timeMode == '固定间隔' && this.$route.query.type == '实时视频') {
|
|
||||||
//console.log('实时视频', '固定间隔');
|
|
||||||
this.$nextTick(() => {
|
|
||||||
// var thatNN = this;
|
|
||||||
ele.cycleStatisticsData.forEach((item) => {
|
|
||||||
if (item.type_data != null) {
|
|
||||||
this.typeCycleStatistics = item;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (this.$refs.typeChartRef2 != undefined) {
|
|
||||||
// // 轮循固定时刻生成的各类组件
|
|
||||||
//console.log('轮循固定时刻生成的各类组件')
|
|
||||||
this.getRef(this.$refs.typeChartRef2, ele.timeMode);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (ele.timeMode == '固定时刻' && this.$route.query.type == '实时视频') {
|
|
||||||
//console.log('实时视频', '固定时刻');
|
|
||||||
this.$nextTick(() => {
|
|
||||||
ele.cycleTimeData.forEach((item) => {
|
|
||||||
if (item.type_data != null) {
|
|
||||||
item.time = item.time.split('.')[0];
|
|
||||||
|
|
||||||
this.typeCycleStatistics = item;
|
|
||||||
}
|
|
||||||
// thatN.$nextTick(() => {
|
|
||||||
});
|
|
||||||
if (this.$refs.typeChartRef1 != undefined) {
|
|
||||||
// // 轮循固定时刻生成的各类组件
|
|
||||||
this.getRef(this.$refs.typeChartRef1, ele.timeMode);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (ele.timeMode == '固定间隔' && this.$route.query.type == '离线视频') {
|
|
||||||
if (
|
|
||||||
this.cycleHistoryData.CycleStatisticsData != undefined &&
|
|
||||||
this.cycleHistoryData.CycleStatisticsData.lenght != 0
|
|
||||||
) {
|
|
||||||
this.cycleHistoryData.CycleStatisticsData.forEach((ne) => {
|
|
||||||
if (ne.component_id == ele.analogAreaComponentId) {
|
|
||||||
ele.cycleStatisticsData = ne.cycleStatisticsData;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.$nextTick(() => {
|
|
||||||
ele.cycleStatisticsData.forEach((item) => {
|
|
||||||
var timeNew = item.time.split('.')[0];
|
|
||||||
var dateLength = timeNew.length;
|
|
||||||
var key = timeNew.substring(dateLength - 8, dateLength);
|
|
||||||
item.time = key;
|
|
||||||
if (item.type_data != null) {
|
|
||||||
this.typeCycleStatistics = item;
|
|
||||||
}
|
|
||||||
// thatN.$nextTick(() => {
|
|
||||||
});
|
|
||||||
if (this.$refs.typeChartRef2 != undefined) {
|
|
||||||
// // 轮循固定时刻生成的各类组件
|
|
||||||
this.getRef(this.$refs.typeChartRef2, '固定间隔');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (ele.timeMode == '固定时刻' && this.$route.query.type == '离线视频') {
|
|
||||||
if (this.cycleHistoryData.CycleTimeData != undefined && this.cycleHistoryData.CycleTimeData.lenght != 0) {
|
|
||||||
this.cycleHistoryData.CycleTimeData.forEach((ne) => {
|
|
||||||
if (ne.component_id == ele.analogAreaComponentId) {
|
|
||||||
ele.cycleTimeData = ne.cycleTimeData;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.$nextTick(() => {
|
|
||||||
ele.cycleTimeData.forEach((item) => {
|
|
||||||
// if(this.$route.query.type=='离线视频'){
|
|
||||||
var timeNew = item.time.split('.')[0];
|
|
||||||
var dateLength = timeNew.length;
|
|
||||||
var key = timeNew.substring(dateLength - 8, dateLength);
|
|
||||||
item.time = key;
|
|
||||||
// }else{
|
|
||||||
// item.time = item.time.split('.')[0];
|
|
||||||
// }
|
|
||||||
if (item.type_data != null) {
|
|
||||||
this.typeCycleStatistics = item;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (this.$refs.typeChartRef1 != undefined) {
|
|
||||||
// // 轮循固定时刻生成的各类组件
|
|
||||||
|
|
||||||
this.getRef(this.$refs.typeChartRef1, '固定时刻');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
deep: true
|
|
||||||
},
|
|
||||||
cycleHistoryData: {
|
cycleHistoryData: {
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
// debugger
|
// debugger
|
||||||
//console.log('历史', newVal);
|
// console.log('历史cycleHistoryData-', newVal);
|
||||||
// //console.log("历史",oldVal)
|
//该主题只会有固定间隔和固定时刻数据
|
||||||
if (newVal != undefined) {
|
if (newVal && this.sectionData.length > 0) {
|
||||||
// newVal.forEach(ele => {
|
//更新sectionData对应的analogAreaComponentId和timeMode更新数据
|
||||||
if (newVal.CycleStatisticsData) {
|
if (newVal.CycleStatisticsData && newVal.CycleStatisticsData.length > 0) {
|
||||||
newVal.CycleStatisticsData.forEach((ele) => {
|
newVal.CycleStatisticsData.forEach((ele) => {
|
||||||
this.$nextTick(() => {
|
if (ele.cycleStatisticsData && ele.cycleStatisticsData.length > 0) {
|
||||||
// var thatNN = this;
|
this.updateSectionData(ele.cycleStatisticsData, 'cycleStatisticsData', '固定间隔');
|
||||||
ele.cycleStatisticsData.forEach((item) => {
|
|
||||||
if (item.type_data != null) {
|
|
||||||
if (this.$route.query.type == '离线视频') {
|
|
||||||
var timeNew = item.time.split('.')[0];
|
|
||||||
var dateLength = timeNew.length;
|
|
||||||
var key = timeNew.substring(dateLength - 8, dateLength);
|
|
||||||
item.time = key;
|
|
||||||
} else {
|
|
||||||
item.time = item.time.split('.')[0];
|
|
||||||
}
|
|
||||||
this.typeCycleStatistics = item;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
if (this.$refs.typeChartRef2 != undefined) {
|
}
|
||||||
// // 轮循固定时刻生成的各类组件
|
if (newVal.cycleTimeData && newVal.cycleTimeData.length > 0) {
|
||||||
this.getRef(this.$refs.typeChartRef2, '固定间隔');
|
newVal.cycleTimeData.forEach((ele) => {
|
||||||
|
if (ele.cycleTimeData && ele.cycleTimeData.length > 0) {
|
||||||
|
this.updateSectionData(ele.cycleTimeData, 'cycleTimeData', '固定时刻');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
|
||||||
}
|
}
|
||||||
if (newVal.CycleTimeData) {
|
|
||||||
newVal.CycleTimeData.forEach((ele) => {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
// debugger
|
|
||||||
// var thatNN = this;
|
|
||||||
ele.cycleTimeData.forEach((item) => {
|
|
||||||
if (this.$route.query.type == '离线视频') {
|
|
||||||
var timeNew = item.time.split('.')[0];
|
|
||||||
var dateLength = timeNew.length;
|
|
||||||
var key = timeNew.substring(dateLength - 8, dateLength);
|
|
||||||
item.time = key;
|
|
||||||
} else {
|
|
||||||
item.time = item.time.split('.')[0];
|
|
||||||
}
|
|
||||||
if (item.type_data != null) {
|
|
||||||
this.typeCycleStatistics = item;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (this.$refs.typeChartRef1 != undefined) {
|
|
||||||
// // 轮循固定时刻生成的各类组件
|
|
||||||
this.getRef(this.$refs.typeChartRef1, '固定时刻');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// });
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true
|
deep: true
|
||||||
},
|
},
|
||||||
// activeName:'channge',
|
|
||||||
// 处理过的触发数据
|
// 处理过的触发数据
|
||||||
triggerListData: {
|
triggerListData: {
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
// console.log("实时触发triggerListData-",newVal)
|
// console.log('实时触发triggerListData-', newVal);
|
||||||
this.triggerList = newVal;
|
//this.triggerList = newVal; //目前看用不到这个数组
|
||||||
// //console.log("oldVal",oldVal)
|
|
||||||
// 触发数据
|
// 触发数据
|
||||||
var _this = this;
|
if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
|
||||||
if (newVal.length != 0 && _this.sectionData.length>0) {
|
//更新sectionData对应的analogAreaComponentId和timeMode更新trigger数据
|
||||||
_this.classify.forEach((ele, index) => {
|
this.updateSectionData(newVal, 'trigger', '实时触发');
|
||||||
if (ele.trigger == undefined && ele.timeMode == '实时触发') {
|
|
||||||
ele.trigger = [];
|
|
||||||
}
|
|
||||||
newVal.forEach((item) => {
|
|
||||||
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '实时触发') {
|
|
||||||
// //console.log(ele.analogAreaComponentId, 'analogAreaComponentId');
|
|
||||||
// //console.log(item.component_id, 'component_id');
|
|
||||||
if (ele.trigger.length == 10) {
|
|
||||||
ele.trigger.pop();
|
|
||||||
}
|
|
||||||
if (this.$route.query.type == '离线视频') {
|
|
||||||
var timeNew = item.time.split('.')[0];
|
|
||||||
var dateLength = timeNew.length;
|
|
||||||
var key = timeNew.substring(dateLength - 8, dateLength);
|
|
||||||
item.time = key;
|
|
||||||
} else {
|
|
||||||
item.time = item.time.split('.')[0];
|
|
||||||
}
|
|
||||||
|
|
||||||
// 该时间的触发数据
|
|
||||||
if (item.type_data != null) {
|
|
||||||
_this.typeTimeMode = item;
|
|
||||||
}
|
|
||||||
//component_type
|
|
||||||
// if(item.component_name=='车头时距_4'){
|
|
||||||
// console.log("dataBoard实时触发triggerListData-item",item)
|
|
||||||
// }
|
|
||||||
ele.trigger.unshift(item);
|
|
||||||
_this.$nextTick(() => {
|
|
||||||
if (_this.$refs.typeChartRef != undefined) {
|
|
||||||
for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
|
|
||||||
// //console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
|
|
||||||
let itemTypeChart = _this.$refs.typeChartRef[i];
|
|
||||||
if (itemTypeChart.dataArr != undefined && itemTypeChart.dataArr.length != 0) {
|
|
||||||
if (itemTypeChart.echartArr.includes('时间曲线图')) {
|
|
||||||
_this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(
|
|
||||||
_this.$refs.typeChartRef[i].dataArr,
|
|
||||||
_this.$refs.typeChartRef[i].componentName.split('_')[0],
|
|
||||||
'实时触发'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (itemTypeChart.echartArr.includes('数值')) {
|
|
||||||
_this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr);
|
|
||||||
}
|
|
||||||
if (itemTypeChart.echartArr.includes('表格')) {
|
|
||||||
_this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr);
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
itemTypeChart.echartArr.includes('直方图') &&
|
|
||||||
itemTypeChart.componentName.split('_')[0]
|
|
||||||
) {
|
|
||||||
// 数据改变重新渲染柱状图
|
|
||||||
itemTypeChart.$refs.barChartRef.drawBar(itemTypeChart.dataArr[0]);
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
itemTypeChart.echartArr.includes('饼状图') &&
|
|
||||||
itemTypeChart.componentName.split('_')[0]
|
|
||||||
) {
|
|
||||||
// 数据改变重新渲染饼图
|
|
||||||
itemTypeChart.$refs.pieChartRef.drawPie(itemTypeChart.dataArr[0]);
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
itemTypeChart.echartArr.includes('均值图') &&
|
|
||||||
itemTypeChart.$refs.avgChartRef != undefined
|
|
||||||
) {
|
|
||||||
itemTypeChart.$refs.avgChartRef.drawBar(itemTypeChart.dataArr[0]);
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
itemTypeChart.componentName.includes('OD') &&
|
|
||||||
itemTypeChart.$refs.ODChartRef != undefined &&
|
|
||||||
itemTypeChart.dataArr[0].ob_data &&
|
|
||||||
itemTypeChart.dataArr[0].ob_data.length != 0
|
|
||||||
) {
|
|
||||||
itemTypeChart.$refs.ODChartRef.drawThermalChart(
|
|
||||||
itemTypeChart.dataArr[0].ob_data,
|
|
||||||
itemTypeChart.startEndData
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
immediate: true
|
immediate: true,
|
||||||
|
deep: true
|
||||||
},
|
},
|
||||||
// 固定时刻的数据
|
// 固定时刻的数据
|
||||||
cycleTimeData: {
|
cycleTimeData: {
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
// 监听到打印固定时刻数据
|
// 监听到打印固定时刻数据
|
||||||
// console.log(newVal, '固定时刻数据');
|
// console.log(newVal, '固定时刻数据');
|
||||||
|
if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
|
||||||
if (newVal != undefined && newVal.length != 0 && this.sectionData) {
|
this.updateSectionData(newVal, 'cycleTimeData', '固定时刻');
|
||||||
var thatN = this;
|
|
||||||
thatN.classify.forEach((ele, index) => {
|
|
||||||
newVal.forEach((item) => {
|
|
||||||
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定时刻') {
|
|
||||||
if (ele.cycleTimeData.length == 10) {
|
|
||||||
ele.cycleTimeData.pop();
|
|
||||||
}
|
}
|
||||||
// item.time = item.time.split('.')[0];
|
|
||||||
if (this.$route.query.type == '离线视频') {
|
|
||||||
var timeNew = item.time.split('.')[0];
|
|
||||||
var dateLength = timeNew.length;
|
|
||||||
var key = timeNew.substring(dateLength - 8, dateLength);
|
|
||||||
item.time = key;
|
|
||||||
} else {
|
|
||||||
item.time = item.time.split('.')[0];
|
|
||||||
}
|
|
||||||
if (item.type_data != null) {
|
|
||||||
// 固定时刻的类型数据
|
|
||||||
thatN.typeCycleTimeData = item;
|
|
||||||
}
|
|
||||||
ele.cycleTimeData.unshift(item);
|
|
||||||
|
|
||||||
// thatN.$nextTick(() => {
|
|
||||||
if (thatN.$refs.typeChartRef1 != undefined) {
|
|
||||||
// //console.log("thatN.$refs.typeChartRef1",thatN.$refs.typeChartRef1)
|
|
||||||
// 轮循固定时刻生成的各类组件
|
|
||||||
for (let i = 0; i < thatN.$refs.typeChartRef1.length; i++) {
|
|
||||||
let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i];
|
|
||||||
if (
|
|
||||||
itemTypeChartRef1.length != 0 &&
|
|
||||||
itemTypeChartRef1.dataArr != undefined &&
|
|
||||||
itemTypeChartRef1.dataArr.length != 0
|
|
||||||
) {
|
|
||||||
if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
|
|
||||||
thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(
|
|
||||||
thatN.$refs.typeChartRef1[i].dataArr,
|
|
||||||
thatN.$refs.typeChartRef1[i].componentName.split('_')[0],
|
|
||||||
'固定时刻'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (itemTypeChartRef1.echartArr.includes('数值')) {
|
|
||||||
thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr);
|
|
||||||
}
|
|
||||||
if (itemTypeChartRef1.echartArr.includes('表格')) {
|
|
||||||
thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr);
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
itemTypeChartRef1.echartArr.includes('直方图') &&
|
|
||||||
itemTypeChartRef1.$refs.barChartRef.drawBar
|
|
||||||
) {
|
|
||||||
// 数据改变重新渲染柱状图
|
|
||||||
itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0]);
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
itemTypeChartRef1.echartArr.includes('饼状图') &&
|
|
||||||
itemTypeChartRef1.$refs.pieChartRef.drawPie
|
|
||||||
) {
|
|
||||||
// 数据改变重新渲染饼图
|
|
||||||
itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0]);
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
itemTypeChartRef1.echartArr.includes('均值图') &&
|
|
||||||
itemTypeChartRef1.$refs.avgChartRef != undefined
|
|
||||||
) {
|
|
||||||
itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0]);
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
itemTypeChartRef1.componentName.includes('OD') &&
|
|
||||||
itemTypeChartRef1.$refs.ODChartRef != undefined &&
|
|
||||||
itemTypeChartRef1.dataArr[0].ob_data &&
|
|
||||||
itemTypeChartRef1.dataArr[0].ob_data.length != 0
|
|
||||||
) {
|
|
||||||
// console.log('固定时刻-od',itemTypeChartRef1.dataArr[0].ob_data)
|
|
||||||
itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(
|
|
||||||
itemTypeChartRef1.dataArr[0].ob_data,
|
|
||||||
itemTypeChartRef1.startEndData
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// else {
|
|
||||||
// var _thatN = this
|
|
||||||
// _thatN.classify.forEach((ele, index) => {
|
|
||||||
|
|
||||||
// // newVal.forEach(item => {
|
|
||||||
// if (ele.timeMode == '固定时刻') {
|
|
||||||
// if (ele.cycleTimeData.length == 10) {
|
|
||||||
// ele.cycleTimeData.pop();
|
|
||||||
// }
|
|
||||||
// // item.time = item.time.split('.')[0];
|
|
||||||
// // if (item.type_data != null) {
|
|
||||||
// // // 固定时刻的类型数据
|
|
||||||
// // _thatN.typeCycleTimeData = item;
|
|
||||||
// // }
|
|
||||||
// // ele.cycleTimeData.unshift(item);
|
|
||||||
// // _thatN.$nextTick(() => {
|
|
||||||
// if (_thatN.$refs.typeChartRef1 != undefined) {
|
|
||||||
// // //console.log("thatN.$refs.typeChartRef1",_thatN.$refs.typeChartRef1)
|
|
||||||
// // 轮循固定时刻生成的各类组件
|
|
||||||
// for (let i = 0; i < _thatN.$refs.typeChartRef1.length; i++) {
|
|
||||||
// let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i]
|
|
||||||
// if (itemTypeChartRef1.length != 0 && itemTypeChartRef1.dataArr != undefined && itemTypeChartRef1.dataArr.length != 0) {
|
|
||||||
|
|
||||||
// if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
|
|
||||||
// _thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(_thatN.$refs.typeChartRef1[i].dataArr, _thatN.$refs.typeChartRef1[i].componentName.split('_')[0], '固定时刻')
|
|
||||||
// }
|
|
||||||
// if (itemTypeChartRef1.echartArr.includes('数值')) {
|
|
||||||
// _thatN.$refs.typeChartRef1[i].getDataArr(_thatN.$refs.typeChartRef1[i].dataArr)
|
|
||||||
// }
|
|
||||||
|
|
||||||
// if (itemTypeChartRef1.echartArr.includes('直方图') && itemTypeChartRef1.$refs.barChartRef.drawBar) {
|
|
||||||
// // 数据改变重新渲染柱状图
|
|
||||||
// itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0])
|
|
||||||
// }
|
|
||||||
// if (itemTypeChartRef1.echartArr.includes('饼状图') && itemTypeChartRef1.$refs.pieChartRef.drawPie) {
|
|
||||||
// // 数据改变重新渲染饼图
|
|
||||||
// itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0])
|
|
||||||
// }
|
|
||||||
// if (itemTypeChartRef1.echartArr.includes('均值图') && itemTypeChartRef1.$refs.avgChartRef.drawBar) {
|
|
||||||
// itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0])
|
|
||||||
// }
|
|
||||||
// if (itemTypeChartRef1.componentName.includes('OD') && itemTypeChartRef1.$refs.ODChartRef != undefined && itemTypeChartRef1.dataArr[0].ob_data.length != 0) {
|
|
||||||
// itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(itemTypeChartRef1.dataArr[0].ob_data, itemTypeChartRef1.startEndData)
|
|
||||||
// }
|
|
||||||
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // });
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// // });
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
},
|
},
|
||||||
immediate: true
|
immediate: true,
|
||||||
|
deep: true
|
||||||
},
|
},
|
||||||
//固定间隔
|
//固定间隔
|
||||||
cycleStatisticsData: {
|
cycleStatisticsData: {
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
// console.log('固定间隔', newVal);
|
// console.log('固定间隔', newVal);
|
||||||
if (newVal != undefined && newVal.length != 0 && this.sectionData) {
|
if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
|
||||||
var that = this;
|
this.updateSectionData(newVal, 'cycleStatisticsData', '固定间隔');
|
||||||
that.classify.forEach((ele, index) => {
|
|
||||||
newVal.forEach((item) => {
|
|
||||||
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定间隔') {
|
|
||||||
if (ele.cycleStatisticsData.length == 10) {
|
|
||||||
ele.cycleStatisticsData.pop();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.$route.query.type == '离线视频') {
|
|
||||||
var timeNew = item.time.split('.')[0];
|
|
||||||
var dateLength = timeNew.length;
|
|
||||||
var key = timeNew.substring(dateLength - 8, dateLength);
|
|
||||||
item.time = key;
|
|
||||||
} else {
|
|
||||||
item.time = item.time.split('.')[0];
|
|
||||||
}
|
|
||||||
if (item.type_data != null) {
|
|
||||||
that.typeCycleStatistics = item;
|
|
||||||
}
|
|
||||||
ele.cycleStatisticsData.unshift(item);
|
|
||||||
if (that.$refs.typeChartRef2 != undefined) {
|
|
||||||
for (let i = 0; i < that.$refs.typeChartRef2.length; i++) {
|
|
||||||
let itemTypeChartRef2 = that.$refs.typeChartRef2[i];
|
|
||||||
|
|
||||||
if (
|
|
||||||
itemTypeChartRef2.length != 0 &&
|
|
||||||
itemTypeChartRef2.dataArr != undefined &&
|
|
||||||
itemTypeChartRef2.dataArr.length != 0
|
|
||||||
) {
|
|
||||||
if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
|
|
||||||
that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(
|
|
||||||
that.$refs.typeChartRef2[i].dataArr,
|
|
||||||
that.$refs.typeChartRef2[i].componentName.split('_')[0],
|
|
||||||
'固定间隔'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (itemTypeChartRef2.echartArr.includes('数值')) {
|
|
||||||
that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr);
|
|
||||||
}
|
|
||||||
if (itemTypeChartRef2.echartArr.includes('表格')) {
|
|
||||||
that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr);
|
|
||||||
}
|
|
||||||
// //console.log(item,'组件数据');
|
|
||||||
if (
|
|
||||||
itemTypeChartRef2.echartArr.includes('直方图') &&
|
|
||||||
itemTypeChartRef2.$refs.barChartRef.drawBar
|
|
||||||
) {
|
|
||||||
// 数据改变重新渲染柱状图
|
|
||||||
// //console.log(item, '组件');
|
|
||||||
itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0]);
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
itemTypeChartRef2.echartArr.includes('饼状图') &&
|
|
||||||
itemTypeChartRef2.$refs.pieChartRef.drawPie
|
|
||||||
) {
|
|
||||||
// 数据改变重新渲染饼图
|
|
||||||
itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0]);
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
itemTypeChartRef2.echartArr.includes('均值图') &&
|
|
||||||
itemTypeChartRef2.$refs.avgChartRef != undefined
|
|
||||||
) {
|
|
||||||
itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0]);
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
itemTypeChartRef2.componentName.includes('OD') &&
|
|
||||||
itemTypeChartRef2.$refs.ODChartRef != undefined &&
|
|
||||||
itemTypeChartRef2.dataArr[0].ob_data &&
|
|
||||||
itemTypeChartRef2.dataArr[0].ob_data.length != 0
|
|
||||||
) {
|
|
||||||
itemTypeChartRef2.$refs.ODChartRef.drawThermalChart(
|
|
||||||
itemTypeChartRef2.dataArr[0].ob_data,
|
|
||||||
itemTypeChartRef2.startEndData
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// else {
|
|
||||||
|
|
||||||
// var _that = this
|
|
||||||
// _that.classify.forEach(ele => {
|
|
||||||
// if (ele.timeMode == '固定间隔') {
|
|
||||||
// if (ele.cycleStatisticsData.length == 10) {
|
|
||||||
// ele.cycleStatisticsData.pop();
|
|
||||||
// }
|
|
||||||
// // item.time = item.time.split('.')[0];
|
|
||||||
// // if (item.type_data != null) {
|
|
||||||
// // _that.typeCycleStatistics = item;
|
|
||||||
// // }
|
|
||||||
// // ele.cycleStatisticsData.unshift(item);
|
|
||||||
// if (_that.$refs.typeChartRef2 != undefined) {
|
|
||||||
// for (let i = 0; i < _that.$refs.typeChartRef2.length; i++) {
|
|
||||||
// let itemTypeChartRef2 = _that.$refs.typeChartRef2[i];
|
|
||||||
// // //console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
|
|
||||||
// if (itemTypeChartRef2.length != 0 && itemTypeChartRef2.dataArr != undefined && itemTypeChartRef2.dataArr.length != 0) {
|
|
||||||
// // this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0])
|
|
||||||
// if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
|
|
||||||
// _that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(_that.$refs.typeChartRef2[i].dataArr, _that.$refs.typeChartRef2[i].componentName.split('_')[0], '固定间隔')
|
|
||||||
// }
|
|
||||||
// if (itemTypeChartRef2.echartArr.includes('数值')) {
|
|
||||||
// _that.$refs.typeChartRef2[i].getDataArr(_that.$refs.typeChartRef2[i].dataArr)
|
|
||||||
// }
|
|
||||||
// // //console.log(item,'组件数据');
|
|
||||||
// if (itemTypeChartRef2.echartArr.includes('直方图') && itemTypeChartRef2.$refs.barChartRef.drawBar) {
|
|
||||||
// // 数据改变重新渲染柱状图
|
|
||||||
// // //console.log(item, '组件');
|
|
||||||
// itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0])
|
|
||||||
// }
|
|
||||||
// if (itemTypeChartRef2.echartArr.includes('饼状图') && itemTypeChartRef2.$refs.pieChartRef.drawPie) {
|
|
||||||
// // 数据改变重新渲染饼图
|
|
||||||
// itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0])
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
|
|
||||||
// // item.$refs.avgChartRef.drawBar(item.dataArr[0])
|
|
||||||
// // }
|
|
||||||
// if (itemTypeChartRef2.echartArr.includes('均值图') && itemTypeChartRef2.$refs.avgChartRef != undefined) {
|
|
||||||
// itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0])
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// }
|
|
||||||
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
},
|
},
|
||||||
immediate: true
|
immediate: true,
|
||||||
|
deep: true
|
||||||
},
|
},
|
||||||
//周期统计实时累计数据主题
|
//周期统计实时累计数据主题
|
||||||
cycleAccumulateData: {
|
cycleAccumulateData: {
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
// console.log('周期统计实时累计数据主题', newVal);
|
// console.log('周期统计实时累计数据主题', newVal);
|
||||||
if (newVal != undefined && newVal.length != 0 && this.sectionData) {
|
if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
|
||||||
var that = this;
|
//实时累计数据主题 只需要覆盖固定间隔主题的卡片数据，图表数据不需要更新
|
||||||
that.classify.forEach((ele, index) => {
|
this.updateSectionData(newVal, 'cycleAccumulateData', '固定间隔');
|
||||||
newVal.forEach((item) => {
|
|
||||||
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定间隔') {
|
|
||||||
// if (ele.cycleStatisticsData.length == 10) {
|
|
||||||
// ele.cycleStatisticsData.pop();
|
|
||||||
// }
|
|
||||||
|
|
||||||
if (this.$route.query.type == '离线视频') {
|
|
||||||
var timeNew = item.time.split('.')[0];
|
|
||||||
var dateLength = timeNew.length;
|
|
||||||
var key = timeNew.substring(dateLength - 8, dateLength);
|
|
||||||
item.time = key;
|
|
||||||
} else {
|
|
||||||
item.time = item.time.split('.')[0];
|
|
||||||
}
|
|
||||||
if (item.type_data != null) {
|
|
||||||
that.typeCycleStatistics = item;
|
|
||||||
}
|
|
||||||
// ele.cycleStatisticsData.unshift(item);
|
|
||||||
if (that.$refs.typeChartRef2 != undefined) {
|
|
||||||
for (let i = 0; i < that.$refs.typeChartRef2.length; i++) {
|
|
||||||
let itemTypeChartRef2 = that.$refs.typeChartRef2[i];
|
|
||||||
|
|
||||||
if (
|
|
||||||
itemTypeChartRef2.length != 0 &&
|
|
||||||
itemTypeChartRef2.dataArr != undefined &&
|
|
||||||
itemTypeChartRef2.dataArr.length != 0
|
|
||||||
) {
|
|
||||||
//console.log('itemTypeChartRef2.echartArr',itemTypeChartRef2.echartArr)
|
|
||||||
if (
|
|
||||||
itemTypeChartRef2.echartArr.includes('数值') &&
|
|
||||||
itemTypeChartRef2.itemData.analogAreaComponentId == item.component_id
|
|
||||||
) {
|
|
||||||
//只需要修改数值组件,逻辑存在问题
|
|
||||||
itemTypeChartRef2.getcycleAccumulateDataArr([item]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
immediate: true
|
immediate: true
|
||||||
|
|
|
||||||
|
|
@ -797,7 +797,7 @@
|
||||||
<el-empty
|
<el-empty
|
||||||
:image-size="100"
|
:image-size="100"
|
||||||
description="暂无数据"
|
description="暂无数据"
|
||||||
v-if="e.triggerDataList == null"
|
v-if="!e.triggerDataList || e.triggerDataList.length == 0"
|
||||||
></el-empty>
|
></el-empty>
|
||||||
<chartsPie
|
<chartsPie
|
||||||
:echartsRef="'echartsPie' + e.duocgqrhpzId"
|
:echartsRef="'echartsPie' + e.duocgqrhpzId"
|
||||||
|
|
@ -806,7 +806,7 @@
|
||||||
:dataList="e.triggerDataList"
|
:dataList="e.triggerDataList"
|
||||||
:timeMode="'实时触发'"
|
:timeMode="'实时触发'"
|
||||||
:intersectionName="intersectionName"
|
:intersectionName="intersectionName"
|
||||||
v-else-if="e.triggerDataList != null"
|
v-else
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||||||
|
|
@ -854,7 +854,7 @@
|
||||||
<el-empty
|
<el-empty
|
||||||
:image-size="100"
|
:image-size="100"
|
||||||
description="暂无数据"
|
description="暂无数据"
|
||||||
v-if="e.triggerDataList == null"
|
v-if="!e.triggerDataList || e.triggerDataList.length == 0"
|
||||||
></el-empty>
|
></el-empty>
|
||||||
<chartsBar
|
<chartsBar
|
||||||
:echartsRef="'echartsBar' + e.duocgqrhpzId"
|
:echartsRef="'echartsBar' + e.duocgqrhpzId"
|
||||||
|
|
@ -863,7 +863,7 @@
|
||||||
:timeMode="'实时触发'"
|
:timeMode="'实时触发'"
|
||||||
:intersectionName="intersectionName"
|
:intersectionName="intersectionName"
|
||||||
:dataList="e.triggerDataList"
|
:dataList="e.triggerDataList"
|
||||||
v-else-if="e.triggerDataList != null"
|
v-else
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||||||
|
|
@ -911,7 +911,7 @@
|
||||||
<el-empty
|
<el-empty
|
||||||
:image-size="100"
|
:image-size="100"
|
||||||
description="暂无数据"
|
description="暂无数据"
|
||||||
v-if="e.triggerDataList == null"
|
v-if="!e.triggerDataList || e.triggerDataList.length == 0"
|
||||||
></el-empty>
|
></el-empty>
|
||||||
<meanValue
|
<meanValue
|
||||||
:echartsRef="'meanValue' + e.duocgqrhpzId"
|
:echartsRef="'meanValue' + e.duocgqrhpzId"
|
||||||
|
|
@ -919,7 +919,7 @@
|
||||||
:chatShowType="chatShowType"
|
:chatShowType="chatShowType"
|
||||||
:intersectionName="intersectionName"
|
:intersectionName="intersectionName"
|
||||||
:dataList="e.triggerDataList"
|
:dataList="e.triggerDataList"
|
||||||
v-else-if="e.triggerDataList != null"
|
v-else
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||||||
|
|
@ -965,7 +965,7 @@
|
||||||
<el-empty
|
<el-empty
|
||||||
:image-size="100"
|
:image-size="100"
|
||||||
description="暂无数据"
|
description="暂无数据"
|
||||||
v-if="e.triggerDataList == null"
|
v-if="!e.triggerDataList || e.triggerDataList.length == 0"
|
||||||
></el-empty>
|
></el-empty>
|
||||||
<thermalOD
|
<thermalOD
|
||||||
:echartsRef="'thermalOD' + e.duocgqrhpzId"
|
:echartsRef="'thermalOD' + e.duocgqrhpzId"
|
||||||
|
|
@ -977,7 +977,7 @@
|
||||||
:endName="e.endSectionNames"
|
:endName="e.endSectionNames"
|
||||||
:dataList="e.triggerDataList"
|
:dataList="e.triggerDataList"
|
||||||
:intersectionName="intersectionName"
|
:intersectionName="intersectionName"
|
||||||
v-else-if="e.triggerDataList != null"
|
v-else
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||||||
|
|
@ -1420,278 +1420,9 @@ export default {
|
||||||
activeNames: ['1'], // 视频折叠
|
activeNames: ['1'], // 视频折叠
|
||||||
intersectionName: [], //数据分析名称
|
intersectionName: [], //数据分析名称
|
||||||
videoList: [],
|
videoList: [],
|
||||||
intersectionList: [
|
intersectionList: [],
|
||||||
// {
|
|
||||||
// intersectionLabel: '路口数据分析',
|
|
||||||
// intersectionChildList: [
|
|
||||||
// {
|
|
||||||
// intersectionTitle: '北进口',
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// name: '卡片区',
|
|
||||||
// twoContentList: [
|
|
||||||
// {
|
|
||||||
// parentTitle: '左转',
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// childrenTitle: '流量',
|
|
||||||
// childrenSmallTitle: '流量',
|
|
||||||
// count: 1,
|
|
||||||
// time: '2023-08-25 11:26:10'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// childrenTitle: '流量',
|
|
||||||
// childrenSmallTitle: '流量',
|
|
||||||
// count: 1,
|
|
||||||
// time: '2023-08-25 11:26:10'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// childrenTitle: '流量',
|
|
||||||
// childrenSmallTitle: '流量',
|
|
||||||
// count: 1,
|
|
||||||
// time: '2023-08-25 11:26:10'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// childrenTitle: '流量',
|
|
||||||
// childrenSmallTitle: '流量',
|
|
||||||
// count: 1,
|
|
||||||
// time: '2023-08-25 11:26:10'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// childrenTitle: '流量',
|
|
||||||
// childrenSmallTitle: '流量',
|
|
||||||
// count: 1,
|
|
||||||
// time: '2023-08-25 11:26:10'
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// parentTitle: '右转',
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// childrenTitle: '流量',
|
|
||||||
// childrenSmallTitle: '流量',
|
|
||||||
// count: 1,
|
|
||||||
// time: '2023-08-25 11:26:10'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// childrenTitle: '速度',
|
|
||||||
// childrenSmallTitle: '速度',
|
|
||||||
// count: 1,
|
|
||||||
// time: '2023-08-25 11:26:10'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// childrenTitle: '流量',
|
|
||||||
// childrenSmallTitle: '流量',
|
|
||||||
// count: 1,
|
|
||||||
// time: '2023-08-25 11:26:10'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// childrenTitle: '流量',
|
|
||||||
// childrenSmallTitle: '流量',
|
|
||||||
// count: 1,
|
|
||||||
// time: '2023-08-25 11:26:10'
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// parentTitle: '直行',
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// childrenTitle: '流量',
|
|
||||||
// childrenSmallTitle: '流量',
|
|
||||||
// count: 1,
|
|
||||||
// time: '2023-08-25 11:26:10'
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: '图表区',
|
|
||||||
// echartsList: [
|
|
||||||
// {
|
|
||||||
// echartsType: '线性',
|
|
||||||
// name: '视频X82_线性图表'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// echartsType: '线性2',
|
|
||||||
// name: '视频X82_表格'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// echartsType: '线性2',
|
|
||||||
// name: '视频X82_饼图'
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
],
|
|
||||||
tabPosition: '1',
|
tabPosition: '1',
|
||||||
threeData: [
|
threeData: [],
|
||||||
// {
|
|
||||||
// id: 1,
|
|
||||||
// label: '路口数据分析页',
|
|
||||||
// showInput: false,
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// id: 2,
|
|
||||||
// label: '北进口',
|
|
||||||
// showInput: false,
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// id: 3,
|
|
||||||
// label: '卡片区',
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// id: 4,
|
|
||||||
// label: '左车道',
|
|
||||||
// showInput: false,
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// id: 5,
|
|
||||||
// label: '空间组件-指标组件'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// id: 6,
|
|
||||||
// label: '空间组件-指标组件'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// id: 7,
|
|
||||||
// label: '空间组件-指标组件'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// id: 8,
|
|
||||||
// label: '空间组件-指标组件'
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// id: 9,
|
|
||||||
// label: '中车道',
|
|
||||||
// showInput: false,
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// id: 10,
|
|
||||||
// label: '空间组件-指标组件'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// id: 11,
|
|
||||||
// label: '空间组件-指标组件'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// id: 12,
|
|
||||||
// label: '空间组件-指标组件'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// id: 13,
|
|
||||||
// label: '空间组件-指标组件'
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// id: 14,
|
|
||||||
// label: '图表区',
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// id: 15,
|
|
||||||
// label: '流量组件-曲线图'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// id: 16,
|
|
||||||
// label: '速度组件-表格'
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// id: 2,
|
|
||||||
// label: '路段数据分析页',
|
|
||||||
// showInput: false,
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// id: 3,
|
|
||||||
// label: '北进口',
|
|
||||||
// showInput: false,
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// id: 4,
|
|
||||||
// label: '卡片区',
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// id: 5,
|
|
||||||
// label: '左车道',
|
|
||||||
// showInput: false,
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// id: 6,
|
|
||||||
// label: '空间组件-指标组件'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// id: 7,
|
|
||||||
// label: '空间组件-指标组件'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// id: 8,
|
|
||||||
// label: '空间组件-指标组件'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// id: 9,
|
|
||||||
// label: '空间组件-指标组件'
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// id: 10,
|
|
||||||
// label: '中车道',
|
|
||||||
// showInput: false,
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// id: 11,
|
|
||||||
// label: '空间组件-指标组件'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// id: 12,
|
|
||||||
// label: '空间组件-指标组件'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// id: 13,
|
|
||||||
// label: '空间组件-指标组件'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// id: 14,
|
|
||||||
// label: '空间组件-指标组件'
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// id: 15,
|
|
||||||
// label: '图表区',
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// id: 16,
|
|
||||||
// label: '流量组件-曲线图'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// id: 17,
|
|
||||||
// label: '速度组件-表格'
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
],
|
|
||||||
defaultProps: {
|
defaultProps: {
|
||||||
children: 'children',
|
children: 'children',
|
||||||
label: 'label'
|
label: 'label'
|
||||||
|
|
@ -1843,9 +1574,9 @@ export default {
|
||||||
this.addSelectOptionField(this.intersectionList);
|
this.addSelectOptionField(this.intersectionList);
|
||||||
// this.addTriggerDataField(this.intersectionList);
|
// this.addTriggerDataField(this.intersectionList);
|
||||||
//mqtt订阅
|
//mqtt订阅
|
||||||
// this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.getMqtt();
|
this.getMqtt();
|
||||||
// });
|
});
|
||||||
|
|
||||||
//console.log(this.intersectionList, 'this.intersectionList');
|
//console.log(this.intersectionList, 'this.intersectionList');
|
||||||
//开发路口默认展开第一个
|
//开发路口默认展开第一个
|
||||||
|
|
@ -2963,7 +2694,7 @@ 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);
|
// console.log('实时触发trigger-', JSON.stringify(msgN));
|
||||||
for (let j = 0; j < msgN.length; j++) {
|
for (let j = 0; j < msgN.length; j++) {
|
||||||
const locations = this.findLocationById(this.intersectionList, msgN[j].component_id);
|
const locations = this.findLocationById(this.intersectionList, msgN[j].component_id);
|
||||||
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
|
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
|
||||||
|
|
@ -3110,6 +2841,10 @@ export default {
|
||||||
// originalSpeed: msgN[j].speed
|
// originalSpeed: msgN[j].speed
|
||||||
// });
|
// });
|
||||||
} else if (msgN[j].component_type == '速度') {
|
} else if (msgN[j].component_type == '速度') {
|
||||||
|
// if(msgN[j].component_name=='速度_3'){
|
||||||
|
// console.log('实时触发trigger-速度', msgN[j]);
|
||||||
|
// }
|
||||||
|
|
||||||
//卡片区
|
//卡片区
|
||||||
let map = {
|
let map = {
|
||||||
speed: msgN[j].speed,
|
speed: msgN[j].speed,
|
||||||
|
|
@ -4243,12 +3978,12 @@ export default {
|
||||||
width: 440px;
|
width: 440px;
|
||||||
height: 282px;
|
height: 282px;
|
||||||
}
|
}
|
||||||
// .echarts0 {
|
.echarts0 {
|
||||||
// position: absolute;
|
// position: absolute;
|
||||||
// width: 440px;
|
// width: 440px;
|
||||||
// height: 282px;
|
// height: 282px;
|
||||||
// z-index: 999;
|
z-index: 999;
|
||||||
// }
|
}
|
||||||
// .echarts1 {
|
// .echarts1 {
|
||||||
// position: absolute;
|
// position: absolute;
|
||||||
// width: 440px;
|
// width: 440px;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue