bug修改
This commit is contained in:
parent
50b57d731b
commit
54e610af2e
|
|
@ -31,7 +31,8 @@
|
|||
"vue-router": "^3.0.3",
|
||||
"vue-schart": "^2.0.0",
|
||||
"vuedraggable": "^2.17.0",
|
||||
"vuex": "^3.6.2"
|
||||
"vuex": "^3.6.2",
|
||||
"lodash": "^4.17.15"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@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){
|
||||
let temp=[];
|
||||
seriesData.forEach((ele) => {
|
||||
if (ele.value != 0) {
|
||||
// if (ele.value != 0) {
|
||||
ele.name = getNameFromTargetType(ele.name);
|
||||
temp.push(ele)
|
||||
}
|
||||
// }
|
||||
})
|
||||
seriesData = temp
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,64 +65,71 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
initEcharts() {
|
||||
this.max = [];
|
||||
this.min = [];
|
||||
this.med = [];
|
||||
this.avg = [];
|
||||
// console.log("均值图",arr)
|
||||
// let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
|
||||
// if (myChart == null) {
|
||||
// myChart = this.$echarts.init(this.$refs.barChart);
|
||||
// this.max = [];
|
||||
// this.min = [];
|
||||
// this.med = [];
|
||||
// this.avg = [];
|
||||
// // console.log("均值图",arr)
|
||||
// // let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
|
||||
// // if (myChart == null) {
|
||||
// // 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);
|
||||
if (this.dataList.length > 10) {
|
||||
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);
|
||||
}
|
||||
// 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].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].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);
|
||||
}
|
||||
// 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.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)));
|
||||
}
|
||||
// // 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 minData = '';
|
||||
let medData = '';
|
||||
let avgData = '';
|
||||
for (let i = 0; i < this.max.length; i++) {
|
||||
maxData = this.max[i];
|
||||
}
|
||||
for (let i = 0; i < this.min.length; i++) {
|
||||
minData = this.min[i];
|
||||
}
|
||||
for (let i = 0; i < this.med.length; i++) {
|
||||
medData = this.med[i];
|
||||
}
|
||||
for (let i = 0; i < this.avg.length; i++) {
|
||||
avgData = this.avg[i];
|
||||
// for (let i = 0; i < this.max.length; i++) {
|
||||
// maxData = this.max[i];
|
||||
// }
|
||||
// for (let i = 0; i < this.min.length; i++) {
|
||||
// minData = this.min[i];
|
||||
// }
|
||||
// for (let i = 0; i < this.med.length; i++) {
|
||||
// medData = this.med[i];
|
||||
// }
|
||||
// for (let i = 0; i < this.avg.length; 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 chartData = [{ stage: '', number: 40 }];
|
||||
|
|
@ -310,45 +317,51 @@ export default {
|
|||
}, 300);
|
||||
},
|
||||
watch: {
|
||||
intersectionName: {
|
||||
handler: function (oldValues, newValues) {
|
||||
this.$nextTick(() => {
|
||||
this.initEcharts();
|
||||
});
|
||||
}
|
||||
},
|
||||
chatShowType: {
|
||||
handler: function (oldValues, newValues) {
|
||||
let that = this;
|
||||
setTimeout(() => {
|
||||
that.$nextTick(() => {
|
||||
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||
if (this.chart == null) {
|
||||
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||
}
|
||||
that.initEcharts();
|
||||
});
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
echartsRef: {
|
||||
handler: function (oldValues, newValues) {
|
||||
console.log('old', oldValues);
|
||||
console.log('newV', newValues);
|
||||
let that = this;
|
||||
setTimeout(() => {
|
||||
that.$nextTick(() => {
|
||||
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||
if (this.chart == null) {
|
||||
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||
}
|
||||
that.initEcharts();
|
||||
});
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
// intersectionName: {
|
||||
// handler: function (oldValues, newValues) {
|
||||
// this.$nextTick(() => {
|
||||
// this.initEcharts();
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
// chatShowType: {
|
||||
// handler: function (oldValues, newValues) {
|
||||
// let that = this;
|
||||
// setTimeout(() => {
|
||||
// that.$nextTick(() => {
|
||||
// this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||
// if (this.chart == null) {
|
||||
// this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||
// }
|
||||
// that.initEcharts();
|
||||
// });
|
||||
// }, 300);
|
||||
// }
|
||||
// },
|
||||
// echartsRef: {
|
||||
// handler: function (newValues, oldValues) {
|
||||
// console.log('old', oldValues);
|
||||
// console.log('newV', newValues);
|
||||
// let that = this;
|
||||
// setTimeout(() => {
|
||||
// that.$nextTick(() => {
|
||||
// this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||
// if (this.chart == null) {
|
||||
// this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||
// }
|
||||
// that.initEcharts();
|
||||
// });
|
||||
// }, 300);
|
||||
// }
|
||||
// },
|
||||
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.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||
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
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div ref="box" class="box" v-loading="loading">
|
||||
<el-empty v-show="!loading&§ionData.length == 0" :image-size="400"></el-empty>
|
||||
<el-empty v-show="!loading && sectionData.length == 0" :image-size="400"></el-empty>
|
||||
<!-- <p class="title" style="margin-bottom: 20px;font-size: 20px;font-weight: 400;">数据看板</p> -->
|
||||
<el-scrollbar class="scrollbar">
|
||||
<div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'">
|
||||
|
|
@ -14,7 +14,6 @@
|
|||
<p class="board-title">
|
||||
<span>{{ s.title }}</span>
|
||||
</p>
|
||||
<!-- <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span> -->
|
||||
</div>
|
||||
<el-tabs>
|
||||
<el-collapse v-model="acticveName" @change="handleChange">
|
||||
|
|
@ -22,7 +21,7 @@
|
|||
<div class="titleGnag"></div>
|
||||
<el-collapse-item :title="o.componentName + o.timeMode" :name="o.analogAreaComponentId">
|
||||
<!--触发的组件 -->
|
||||
<typeChart
|
||||
<newtypeChart
|
||||
ref="typeChartRef"
|
||||
v-if="o.timeMode === '实时触发'"
|
||||
:itemData="o"
|
||||
|
|
@ -36,7 +35,7 @@
|
|||
:typeValue="typeTimeMode"
|
||||
:startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
|
||||
/>
|
||||
<typeChart
|
||||
<newtypeChart
|
||||
ref="typeChartRef1"
|
||||
v-if="o.timeMode === '固定时刻'"
|
||||
:itemData="o"
|
||||
|
|
@ -52,7 +51,7 @@
|
|||
/>
|
||||
|
||||
<!-- 固定间隔的组件 -->
|
||||
<typeChart
|
||||
<newtypeChart
|
||||
ref="typeChartRef2"
|
||||
style="width: 100%"
|
||||
v-if="o.timeMode === '固定间隔'"
|
||||
|
|
@ -61,6 +60,7 @@
|
|||
:triggerType="o.timeMode"
|
||||
:componentName="o.componentName"
|
||||
:dataArr="o.cycleStatisticsData"
|
||||
:cycleAccumulateData="o.cycleAccumulateData"
|
||||
:echartArr="o.presentationForm"
|
||||
:title="o.componentName.split('_')[0]"
|
||||
:chartName="o.combinationName"
|
||||
|
|
@ -81,12 +81,13 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import typeChart from '../../components/target/typeChart.vue';
|
||||
import newtypeChart from '../../components/target/newtypeChart.vue';
|
||||
// import {mapMutation} from 'vuex'
|
||||
import { getComponentSection } from '../../api/index';
|
||||
import { update } from '../../api/aboutMachine';
|
||||
export default {
|
||||
components: {
|
||||
typeChart
|
||||
newtypeChart
|
||||
},
|
||||
props: {
|
||||
activeName: {
|
||||
|
|
@ -136,48 +137,37 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
loading: false,
|
||||
acticveName: [],
|
||||
title1: '01断面',
|
||||
title2: '01区域',
|
||||
dialogVisible: false,
|
||||
|
||||
idVal: '',
|
||||
//组件数组
|
||||
componentList: [],
|
||||
// 触发数据数组
|
||||
triggerList: [],
|
||||
|
||||
sectionData: [],
|
||||
|
||||
// 单个区域或者断面的表格触发数据
|
||||
tableList: [],
|
||||
|
||||
// 路线数据
|
||||
headWay: [],
|
||||
|
||||
tripData: [],
|
||||
|
||||
sectionArr: [],
|
||||
|
||||
//触发的类型数值看板显示
|
||||
typeTimeMode: {},
|
||||
// 固定时刻的数值看板展示
|
||||
typeCycleTimeData: {},
|
||||
typeCycleStatistics: {},
|
||||
// "type_data":[{//类型数据，只供类型组件使用，只有组件类型为类型的时候，这个字段才有值
|
||||
// "name":"electric bicycle",//类型名称
|
||||
// "quantity":0//数量
|
||||
// }],
|
||||
// "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: []
|
||||
// cycleHistoryData:''
|
||||
};
|
||||
},
|
||||
// beforeCeated(){
|
||||
|
||||
// },
|
||||
created() {
|
||||
// this.getNew()
|
||||
// //console.log("cycleHistoryData",this.cycleHistoryData)
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
// 手风琴下拉切换
|
||||
handleChange(val) {
|
||||
|
|
@ -188,24 +178,27 @@ export default {
|
|||
// });
|
||||
// }, 3000);
|
||||
},
|
||||
//点击数据看板tab会执行获取所有配置的组件
|
||||
getNew() {
|
||||
// this.idVal = ;
|
||||
this.loading=true;
|
||||
getComponentSection({ VideoId: this.$route.query.id, Number: 10 }).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
//console.log(res.data.data, '组件的数据');
|
||||
this.componentList = res.data.data;
|
||||
this.siftData();
|
||||
}
|
||||
}).finally(()=>{
|
||||
this.loading=false;
|
||||
});
|
||||
this.loading = true;
|
||||
getComponentSection({ VideoId: this.$route.query.id, Number: 10 })
|
||||
.then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
//console.log(res.data.data, '组件的数据');
|
||||
this.componentList = res.data.data;
|
||||
this.siftData();
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
//组件数据根据分类重组到相同分类下
|
||||
siftData() {
|
||||
//获取分类
|
||||
this.sectionArr = [];
|
||||
this.sectionData = [];
|
||||
this.classify = [];
|
||||
// this.classify = []; //通过相同赋值来改变sectionData里面children数据的改变不太合理，所以这边不用了
|
||||
this.componentList.forEach((val) => {
|
||||
// //console.log("val",val)
|
||||
this.sectionArr.push(val.combinationName);
|
||||
|
|
@ -213,697 +206,145 @@ export default {
|
|||
});
|
||||
this.sectionData = this.sectionArr.map((item) => {
|
||||
item = { title: item, children: [] };
|
||||
this.acticveName = [];
|
||||
this.acticveName = []; //存储collapse组件的展开，默认全部收缩
|
||||
this.componentList.forEach((val) => {
|
||||
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);
|
||||
if (val.timeMode == '固定间隔' || this.cycleStatisticsData.length == 0) {
|
||||
item.cycleStatisticsData = val.cycleStatisticsData;
|
||||
}
|
||||
if (val.timeMode == '固定时刻' || this.cycleTimeData.length == 0) {
|
||||
item.cycleTimeData = val.cycleTimeData;
|
||||
}
|
||||
//把cycleStatisticsData，cycleTimeData存给children同级别暂时没理解为啥怎么做
|
||||
// if (val.timeMode == '固定间隔' || this.cycleStatisticsData.length == 0) {
|
||||
// item.cycleStatisticsData = val.cycleStatisticsData;
|
||||
// }
|
||||
// if (val.timeMode == '固定时刻' || this.cycleTimeData.length == 0) {
|
||||
// item.cycleTimeData = val.cycleTimeData;
|
||||
// }
|
||||
}
|
||||
this.acticveName.push([val.analogAreaComponentId]);
|
||||
// this.acticveName.push(val.analogAreaComponentId);
|
||||
});
|
||||
return item;
|
||||
});
|
||||
// console.log('折叠面板-', this.acticveName);
|
||||
},
|
||||
// 组件图标点击下拉事件
|
||||
sectionHandle(i) {
|
||||
// let sections = document.querySelectorAll('.section');
|
||||
let sectionBox = document.querySelectorAll('.sectionBox');
|
||||
let downPulls1 = document.querySelectorAll('.downPull1');
|
||||
// 断面的小图标
|
||||
downPulls1[i].dataset.num++;
|
||||
if (downPulls1[i].dataset.num % 2 == 0) {
|
||||
downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';
|
||||
// sections[i].style.height = 'auto';
|
||||
if (sectionBox[i] != undefined) {
|
||||
// sectionBox[i].style.height = 'auto';
|
||||
updateSectionData(newVal, updateKey, timeMode) {
|
||||
this.sectionData.forEach((item) => {
|
||||
//item.title == val.combinationName
|
||||
if (item.children && item.children.length > 0) {
|
||||
item.children.forEach((cItem) => {
|
||||
if (cItem.timeMode == timeMode) {
|
||||
//找出对应timeMode的mqtt数据
|
||||
newVal.forEach((nItem) => {
|
||||
if (cItem.analogAreaComponentId == nItem.component_id) {
|
||||
if (cItem[updateKey].length > 9) {
|
||||
this.$set(cItem, updateKey, cItem[updateKey].slice(0, 9));
|
||||
}
|
||||
//这里逻辑不知道为啥这样处理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 {
|
||||
nItem.time = nItem.time.split('.')[0];
|
||||
}
|
||||
// cItem[updateKey].unshift(nItem);
|
||||
this.$set(cItem, updateKey, [nItem, ...cItem[updateKey]]);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
downPulls1[i].style.cssText = 'transition: all 0.5s linear;';
|
||||
// sections[i].style.height = '500px';
|
||||
if (sectionBox[i] != undefined) {
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 触发数据的类型数值
|
||||
|
||||
//循环方法
|
||||
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);
|
||||
}
|
||||
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() {}
|
||||
});
|
||||
this.$forceUpdate();
|
||||
// console.log('sectionData', this.sectionData);
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
watch: {
|
||||
// 触发的原始数据
|
||||
triggerData: {
|
||||
handler(newVal, oldVal) {},
|
||||
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
|
||||
},
|
||||
// 触发的原始数据 作用是给3d那边，界面不需要展示
|
||||
// triggerData: {
|
||||
// handler(newVal, oldVal) {},
|
||||
// immediate: true
|
||||
// },
|
||||
//离线历史数据
|
||||
cycleHistoryData: {
|
||||
handler(newVal) {
|
||||
// debugger
|
||||
//console.log('历史', newVal);
|
||||
// //console.log("历史",oldVal)
|
||||
if (newVal != undefined) {
|
||||
// newVal.forEach(ele => {
|
||||
if (newVal.CycleStatisticsData) {
|
||||
// console.log('历史cycleHistoryData-', newVal);
|
||||
//该主题只会有固定间隔和固定时刻数据
|
||||
if (newVal && this.sectionData.length > 0) {
|
||||
//更新sectionData对应的analogAreaComponentId和timeMode更新数据
|
||||
if (newVal.CycleStatisticsData && newVal.CycleStatisticsData.length > 0) {
|
||||
newVal.CycleStatisticsData.forEach((ele) => {
|
||||
this.$nextTick(() => {
|
||||
// var thatNN = this;
|
||||
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) {
|
||||
// // 轮循固定时刻生成的各类组件
|
||||
this.getRef(this.$refs.typeChartRef2, '固定间隔');
|
||||
}
|
||||
});
|
||||
if (ele.cycleStatisticsData && ele.cycleStatisticsData.length > 0) {
|
||||
this.updateSectionData(ele.cycleStatisticsData, 'cycleStatisticsData', '固定间隔');
|
||||
}
|
||||
});
|
||||
}
|
||||
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, '固定时刻');
|
||||
}
|
||||
});
|
||||
if (newVal.cycleTimeData && newVal.cycleTimeData.length > 0) {
|
||||
newVal.cycleTimeData.forEach((ele) => {
|
||||
if (ele.cycleTimeData && ele.cycleTimeData.length > 0) {
|
||||
this.updateSectionData(ele.cycleTimeData, 'cycleTimeData', '固定时刻');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// });
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
// activeName:'channge',
|
||||
// 处理过的触发数据
|
||||
triggerListData: {
|
||||
handler(newVal) {
|
||||
// console.log("实时触发triggerListData-",newVal)
|
||||
this.triggerList = newVal;
|
||||
// //console.log("oldVal",oldVal)
|
||||
// console.log('实时触发triggerListData-', newVal);
|
||||
//this.triggerList = newVal; //目前看用不到这个数组
|
||||
// 触发数据
|
||||
var _this = this;
|
||||
if (newVal.length != 0 && _this.sectionData.length>0) {
|
||||
_this.classify.forEach((ele, index) => {
|
||||
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
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
|
||||
//更新sectionData对应的analogAreaComponentId和timeMode更新trigger数据
|
||||
this.updateSectionData(newVal, 'trigger', '实时触发');
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
// 固定时刻的数据
|
||||
cycleTimeData: {
|
||||
handler(newVal) {
|
||||
// 监听到打印固定时刻数据
|
||||
// console.log(newVal, '固定时刻数据');
|
||||
|
||||
if (newVal != undefined && newVal.length != 0 && this.sectionData) {
|
||||
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
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// });
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
|
||||
this.updateSectionData(newVal, 'cycleTimeData', '固定时刻');
|
||||
}
|
||||
// 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: {
|
||||
handler(newVal) {
|
||||
// console.log('固定间隔', newVal);
|
||||
if (newVal != undefined && newVal.length != 0 && this.sectionData) {
|
||||
var that = this;
|
||||
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
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
|
||||
this.updateSectionData(newVal, 'cycleStatisticsData', '固定间隔');
|
||||
}
|
||||
// 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: {
|
||||
handler(newVal) {
|
||||
// console.log('周期统计实时累计数据主题', newVal);
|
||||
if (newVal != undefined && newVal.length != 0 && this.sectionData) {
|
||||
var that = this;
|
||||
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
|
||||
) {
|
||||
//console.log('itemTypeChartRef2.echartArr',itemTypeChartRef2.echartArr)
|
||||
if (
|
||||
itemTypeChartRef2.echartArr.includes('数值') &&
|
||||
itemTypeChartRef2.itemData.analogAreaComponentId == item.component_id
|
||||
) {
|
||||
//只需要修改数值组件,逻辑存在问题
|
||||
itemTypeChartRef2.getcycleAccumulateDataArr([item]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
|
||||
//实时累计数据主题 只需要覆盖固定间隔主题的卡片数据，图表数据不需要更新
|
||||
this.updateSectionData(newVal, 'cycleAccumulateData', '固定间隔');
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
|
|
|
|||
|
|
@ -797,7 +797,7 @@
|
|||
<el-empty
|
||||
:image-size="100"
|
||||
description="暂无数据"
|
||||
v-if="e.triggerDataList == null"
|
||||
v-if="!e.triggerDataList || e.triggerDataList.length == 0"
|
||||
></el-empty>
|
||||
<chartsPie
|
||||
:echartsRef="'echartsPie' + e.duocgqrhpzId"
|
||||
|
|
@ -806,7 +806,7 @@
|
|||
:dataList="e.triggerDataList"
|
||||
:timeMode="'实时触发'"
|
||||
:intersectionName="intersectionName"
|
||||
v-else-if="e.triggerDataList != null"
|
||||
v-else
|
||||
/>
|
||||
</div>
|
||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||||
|
|
@ -854,7 +854,7 @@
|
|||
<el-empty
|
||||
:image-size="100"
|
||||
description="暂无数据"
|
||||
v-if="e.triggerDataList == null"
|
||||
v-if="!e.triggerDataList || e.triggerDataList.length == 0"
|
||||
></el-empty>
|
||||
<chartsBar
|
||||
:echartsRef="'echartsBar' + e.duocgqrhpzId"
|
||||
|
|
@ -863,7 +863,7 @@
|
|||
:timeMode="'实时触发'"
|
||||
:intersectionName="intersectionName"
|
||||
:dataList="e.triggerDataList"
|
||||
v-else-if="e.triggerDataList != null"
|
||||
v-else
|
||||
/>
|
||||
</div>
|
||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||||
|
|
@ -911,7 +911,7 @@
|
|||
<el-empty
|
||||
:image-size="100"
|
||||
description="暂无数据"
|
||||
v-if="e.triggerDataList == null"
|
||||
v-if="!e.triggerDataList || e.triggerDataList.length == 0"
|
||||
></el-empty>
|
||||
<meanValue
|
||||
:echartsRef="'meanValue' + e.duocgqrhpzId"
|
||||
|
|
@ -919,7 +919,7 @@
|
|||
:chatShowType="chatShowType"
|
||||
:intersectionName="intersectionName"
|
||||
:dataList="e.triggerDataList"
|
||||
v-else-if="e.triggerDataList != null"
|
||||
v-else
|
||||
/>
|
||||
</div>
|
||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||||
|
|
@ -965,7 +965,7 @@
|
|||
<el-empty
|
||||
:image-size="100"
|
||||
description="暂无数据"
|
||||
v-if="e.triggerDataList == null"
|
||||
v-if="!e.triggerDataList || e.triggerDataList.length == 0"
|
||||
></el-empty>
|
||||
<thermalOD
|
||||
:echartsRef="'thermalOD' + e.duocgqrhpzId"
|
||||
|
|
@ -977,7 +977,7 @@
|
|||
:endName="e.endSectionNames"
|
||||
:dataList="e.triggerDataList"
|
||||
:intersectionName="intersectionName"
|
||||
v-else-if="e.triggerDataList != null"
|
||||
v-else
|
||||
/>
|
||||
</div>
|
||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||||
|
|
@ -1420,278 +1420,9 @@ export default {
|
|||
activeNames: ['1'], // 视频折叠
|
||||
intersectionName: [], //数据分析名称
|
||||
videoList: [],
|
||||
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_饼图'
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
],
|
||||
intersectionList: [],
|
||||
tabPosition: '1',
|
||||
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: '速度组件-表格'
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
],
|
||||
threeData: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
|
|
@ -1843,9 +1574,9 @@ export default {
|
|||
this.addSelectOptionField(this.intersectionList);
|
||||
// this.addTriggerDataField(this.intersectionList);
|
||||
//mqtt订阅
|
||||
// this.$nextTick(() => {
|
||||
this.getMqtt();
|
||||
// });
|
||||
this.$nextTick(() => {
|
||||
this.getMqtt();
|
||||
});
|
||||
|
||||
//console.log(this.intersectionList, 'this.intersectionList');
|
||||
//开发路口默认展开第一个
|
||||
|
|
@ -2963,7 +2694,7 @@ export default {
|
|||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
var detId = [];
|
||||
const msgN = JSON.parse(temp);
|
||||
// console.log('实时触发trigger-', msgN);
|
||||
// console.log('实时触发trigger-', JSON.stringify(msgN));
|
||||
for (let j = 0; j < msgN.length; j++) {
|
||||
const locations = this.findLocationById(this.intersectionList, msgN[j].component_id);
|
||||
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
|
||||
|
|
@ -3110,6 +2841,10 @@ export default {
|
|||
// originalSpeed: msgN[j].speed
|
||||
// });
|
||||
} else if (msgN[j].component_type == '速度') {
|
||||
// if(msgN[j].component_name=='速度_3'){
|
||||
// console.log('实时触发trigger-速度', msgN[j]);
|
||||
// }
|
||||
|
||||
//卡片区
|
||||
let map = {
|
||||
speed: msgN[j].speed,
|
||||
|
|
@ -4243,12 +3978,12 @@ export default {
|
|||
width: 440px;
|
||||
height: 282px;
|
||||
}
|
||||
// .echarts0 {
|
||||
// position: absolute;
|
||||
// width: 440px;
|
||||
// height: 282px;
|
||||
// z-index: 999;
|
||||
// }
|
||||
.echarts0 {
|
||||
// position: absolute;
|
||||
// width: 440px;
|
||||
// height: 282px;
|
||||
z-index: 999;
|
||||
}
|
||||
// .echarts1 {
|
||||
// position: absolute;
|
||||
// width: 440px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue