4129 lines
235 KiB
Vue
4129 lines
235 KiB
Vue
<template>
|
||
<div class="content-box" v-loading="loading" v-if="offlineVideo">
|
||
<div class="container offlineVideo" v-if="!loading">
|
||
<!-- TODO -->
|
||
<!-- <player></player> -->
|
||
<el-empty description="此模块只支持实时视频分析"></el-empty>
|
||
</div>
|
||
</div>
|
||
<div v-else class="content-box" v-loading="loading">
|
||
<el-collapse v-model="activeNames">
|
||
<el-collapse-item title="监控列表" name="1">
|
||
<el-row>
|
||
<el-col :span="6" v-for="(item, index) in videoList" :key="index" :offset="0" style="margin-top: 1%">
|
||
<el-card :body-style="{ padding: '0px' }" class="cardList">
|
||
<div class="type">
|
||
<img src="@/assets/img/AnalysisMain/leftTop.png" />
|
||
</div>
|
||
<div class="name">
|
||
<img src="@/assets/img/AnalysisMain/ssVideo.png" />
|
||
</div>
|
||
<div class="statusN">
|
||
<img src="@/assets/img/AnalysisMain/status.png" />
|
||
</div>
|
||
<span class="statusName">{{ item.status }}</span>
|
||
<!-- <img :src="item.videoUrl"
|
||
class="videoContent"> -->
|
||
<iframe
|
||
:src="'/flv/index.html?src=' + item.videoStreamAddress"
|
||
frameborder="0"
|
||
scrolling="no"
|
||
class="videoContent"
|
||
></iframe>
|
||
<div style="padding-left: 8%; box-sizing: border-box">
|
||
<div class="footImg">
|
||
<img src="@/assets/img/AnalysisMain/video (1).png" style="width: 20px; height: 20px" />
|
||
<span style="margin-left: 5%">{{ item.videoName }}</span>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
<el-button icon="el-icon-setting" circle type="text" class="buttonType" @click="handleDialog"></el-button>
|
||
<el-tabs type="border-card" class="tabsList" @tab-click="tabChange">
|
||
<el-tab-pane :label="x.name" v-for="(x, y) in intersectionList" :key="y">
|
||
<el-collapse v-model="intersectionName" v-for="(z, w) in x.children" :key="w" @change="handleCollapseChange">
|
||
<el-collapse-item :title="z.name" :name="z.name" class="collapseList">
|
||
<div :class="'cardChatPentar' + p" v-for="(o, p) in z.children" :key="p">
|
||
<div v-if="o.name == '卡片区'" class="cardArea">
|
||
<div class="intersectionCard" v-for="(item, index) in o.children" :key="index">
|
||
<span class="intersectionCardTitle">{{ item.name }}</span>
|
||
<el-card class="boxList" v-for="(i, key) in item.children" :key="key">
|
||
<div slot="header" class="clearfix">
|
||
<span
|
||
style="font-size: 14px; color: rgb(160, 160, 160)"
|
||
class="containerTitle"
|
||
:class="'hovered' + i.duocgqrhpzId"
|
||
@mouseover="showTooltip(i.duocgqrhpzId)"
|
||
@mouseout="hideTooltip(i.duocgqrhpzId)"
|
||
>{{ i.videoName }}-{{ i.combinationName }}-{{ i.componentName }}</span
|
||
>
|
||
<span
|
||
:class="'tooltip' + i.duocgqrhpzId"
|
||
v-show="hovered"
|
||
style="color: rgb(160, 160, 160)"
|
||
@mouseover="showTooltip(i.duocgqrhpzId)"
|
||
@mouseout="hideTooltip(i.duocgqrhpzId)"
|
||
>{{ i.videoName }}-{{ i.combinationName }}-{{ i.componentName }}</span
|
||
>
|
||
<span
|
||
style="font-size: 12px"
|
||
class="containerTitle1"
|
||
@mouseover="showCardtip(i.duocgqrhpzId)"
|
||
@mouseout="hideCardtip(i.duocgqrhpzId)"
|
||
:class="'cardTitle' + i.duocgqrhpzId"
|
||
>{{ i.componentType }}-{{ i.timeMode }}</span
|
||
>
|
||
<span
|
||
style="font-size: 12px"
|
||
v-show="cardTitle"
|
||
@mouseover="showCardtip(i.duocgqrhpzId)"
|
||
@mouseout="hideCardtip(i.duocgqrhpzId)"
|
||
:class="'cardTitle1' + i.duocgqrhpzId"
|
||
>{{ i.componentType }}-{{ i.timeMode }}</span
|
||
>
|
||
</div>
|
||
<div v-if="i.timeMode == '实时触发'">
|
||
<el-empty :image-size="20" description="暂无数据" v-if="i.triggerData == null"></el-empty>
|
||
<div class="cardContent" v-else-if="i.triggerData != null">
|
||
<div class="count">
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '速度'"
|
||
>
|
||
<span
|
||
v-if="
|
||
(i.triggerData.speed && i.triggerData.speed != -1) ||
|
||
i.triggerData.speed === 0
|
||
"
|
||
>
|
||
{{ Math.abs(i.triggerData.speed) }}
|
||
</span>
|
||
<span v-else>-</span>
|
||
</span>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '车头时距'"
|
||
>{{
|
||
i.triggerData.headway || i.triggerData.headway === 0
|
||
? i.triggerData.headway == -1
|
||
? '-'
|
||
: i.triggerData.headway
|
||
: '-'
|
||
}}</span
|
||
>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '流量'"
|
||
>
|
||
<span v-if="i.flowType == '入流'">{{
|
||
i.triggerData.inFlow || i.triggerData.inFlow === 0 ? i.triggerData.inFlow : '-'
|
||
}}</span>
|
||
<span v-if="i.flowType == '出流'">{{
|
||
i.triggerData.outFlow || i.triggerData.outFlow === 0
|
||
? i.triggerData.outFlow
|
||
: '-'
|
||
}}</span>
|
||
</span>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '类型'"
|
||
>
|
||
<!-- <span v-if="Number(i.triggerData.type_data[0].quantity)">{{
|
||
i.triggerData.type_data[0].quantity
|
||
}}</span> -->
|
||
<!-- <span v-else>0</span> -->
|
||
<span v-if="i.triggerData && i.triggerData.type_data">{{
|
||
getTotal(i.triggerData.type_data, 'quantity', 'value')
|
||
}}</span>
|
||
<span v-else>-</span>
|
||
</span>
|
||
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '检测数'"
|
||
>{{
|
||
i.triggerData.n_stay || i.triggerData.n_stay === 0 ? i.triggerData.n_stay : '-'
|
||
}}</span
|
||
>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '排队数'"
|
||
>{{
|
||
i.triggerData.n_queue || i.triggerData.n_queue === 0
|
||
? i.triggerData.n_queue
|
||
: '-'
|
||
}}</span
|
||
>
|
||
<span style="font-size: 14px" v-if="i.componentType == '车头时距'">秒</span>
|
||
<span style="font-size: 13px" v-if="i.componentType == '速度'">
|
||
<span
|
||
v-if="
|
||
(i.triggerData.speed && i.triggerData.speed != -1) ||
|
||
i.triggerData.speed === 0
|
||
"
|
||
>
|
||
{{ i.triggerData.speed > 0 || i.triggerData.speed === 0 ? 'km/h' : 'pix/s' }}
|
||
</span>
|
||
</span>
|
||
<span style="font-size: 14px" v-if="i.componentType == '类型'">个</span>
|
||
<span style="font-size: 14px" v-if="i.componentType == '流量'">辆</span>
|
||
<span
|
||
style="font-size: 14px"
|
||
v-if="i.componentType == '检测数' || i.componentType == '排队数'"
|
||
>辆</span
|
||
>
|
||
</div>
|
||
<div class="time">
|
||
<el-empty
|
||
:image-size="20"
|
||
description="暂无数据"
|
||
v-if="i.triggerData == null"
|
||
></el-empty>
|
||
<span style="text-align: center" v-else>{{ i.triggerData.time }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="i.timeMode == '固定时刻'">
|
||
<el-empty
|
||
:image-size="20"
|
||
description="暂无数据"
|
||
v-if="i.cycleTimeData.length == 0 || i.cycleTimeData.length == null"
|
||
></el-empty>
|
||
<div class="cardContent" v-else>
|
||
<div class="count">
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '速度' && i.triggerData == null"
|
||
>
|
||
<span
|
||
v-if="
|
||
(i.cycleTimeData[0].speed && i.cycleTimeData[0].speed != -1) ||
|
||
i.cycleTimeData[0].speed === 0
|
||
"
|
||
>
|
||
{{ Math.abs(i.cycleTimeData[0].speed) }}
|
||
</span>
|
||
<span v-else>-</span>
|
||
</span>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '速度' && i.triggerData != null"
|
||
>
|
||
<span
|
||
v-if="
|
||
(i.triggerData.speed && i.triggerData.speed != -1) ||
|
||
i.triggerData.speed === 0
|
||
"
|
||
>
|
||
{{ Math.abs(i.triggerData.speed) }}
|
||
</span>
|
||
<span v-else>-</span>
|
||
</span>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '车头时距' && i.triggerData == null"
|
||
>{{
|
||
i.cycleTimeData[0].headway || i.cycleTimeData[0].headway === 0
|
||
? i.cycleTimeData[0].headway == -1
|
||
? '-'
|
||
: i.cycleTimeData[0].headway
|
||
: '-'
|
||
}}</span
|
||
>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-else-if="i.componentType == '车头时距' && i.triggerData != null"
|
||
>{{
|
||
i.triggerData.headway || i.triggerData.headway === 0
|
||
? i.triggerData.headway == -1
|
||
? '-'
|
||
: i.triggerData.headway
|
||
: '-'
|
||
}}</span
|
||
>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '流量'"
|
||
>
|
||
<span v-if="i.flowType == '入流'">{{
|
||
i.cycleTimeData[0].in_flow || i.cycleTimeData[0].in_flow === 0
|
||
? i.cycleTimeData[0].in_flow
|
||
: '-'
|
||
}}</span>
|
||
<span v-if="i.flowType == '出流'">{{
|
||
i.cycleTimeData[0].out_flow || i.cycleTimeData[0].out_flow === 0
|
||
? i.cycleTimeData[0].out_flow
|
||
: '-'
|
||
}}</span>
|
||
</span>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '类型'"
|
||
>
|
||
<span
|
||
v-if="
|
||
!i.triggerData &&
|
||
i.cycleTimeData &&
|
||
i.cycleTimeData.length > 0 &&
|
||
i.cycleTimeData[0].type_data
|
||
"
|
||
>
|
||
<!-- {{
|
||
i.cycleTimeData[0].type_data[0].quantity +
|
||
i.cycleTimeData[0].type_data[1].quantity +
|
||
i.cycleTimeData[0].type_data[2].quantity
|
||
}} -->
|
||
{{ getTotal(i.cycleTimeData[0].type_data, 'quantity', 'value') }}
|
||
</span>
|
||
<span v-else-if="i.triggerData && i.triggerData.type_data">
|
||
{{ getTotal(i.triggerData.type_data, 'quantity', 'value') }}
|
||
<!-- <span
|
||
v-if="
|
||
!Number.isNaN(
|
||
Number(
|
||
i.triggerData.type_data[0].quantity +
|
||
i.triggerData.type_data[1].quantity +
|
||
i.triggerData.type_data[2].quantity
|
||
)
|
||
)
|
||
"
|
||
>{{
|
||
i.triggerData.type_data[0].quantity +
|
||
i.triggerData.type_data[1].quantity +
|
||
i.triggerData.type_data[2].quantity
|
||
}}</span
|
||
>
|
||
<span v-else>0</span> -->
|
||
</span>
|
||
<span v-else>-</span>
|
||
</span>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '检测数'"
|
||
>{{
|
||
i.cycleTimeData[0].n_stay || i.cycleTimeData[0].n_stay === 0
|
||
? i.cycleTimeData[0].n_stay
|
||
: '-'
|
||
}}</span
|
||
>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '排队数'"
|
||
>{{
|
||
i.cycleTimeData[0].n_queue || i.cycleTimeData[0].n_queue === 0
|
||
? i.cycleTimeData[0].n_queue
|
||
: '-'
|
||
}}</span
|
||
>
|
||
<span style="font-size: 14px" v-if="i.componentType == '车头时距'">秒</span>
|
||
<span style="font-size: 13px" v-if="i.componentType == '速度'">
|
||
<span v-if="i.triggerData == null">
|
||
<span
|
||
v-if="
|
||
(i.cycleTimeData[0].speed && i.cycleTimeData[0].speed != -1) ||
|
||
i.cycleTimeData[0].speed === 0
|
||
"
|
||
>
|
||
{{
|
||
i.cycleTimeData[0].speed > 0 || i.cycleTimeData[0].speed === 0
|
||
? 'km/h'
|
||
: 'pix/s'
|
||
}}
|
||
</span>
|
||
</span>
|
||
<span v-else>
|
||
<span
|
||
v-if="
|
||
(i.triggerData.speed && i.triggerData.speed != -1) ||
|
||
i.triggerData.speed === 0
|
||
"
|
||
>
|
||
{{
|
||
i.triggerData.speed > 0 || i.triggerData.speed === 0 ? 'km/h' : 'pix/s'
|
||
}}
|
||
</span>
|
||
</span>
|
||
</span>
|
||
<span style="font-size: 14px" v-if="i.componentType == '类型'">个</span>
|
||
<span style="font-size: 14px" v-if="i.componentType == '流量'">辆</span>
|
||
<span
|
||
style="font-size: 14px"
|
||
v-if="i.componentType == '检测数' || i.componentType == '排队数'"
|
||
>辆</span
|
||
>
|
||
</div>
|
||
<div class="time">
|
||
<span style="text-align: center" v-if="i.triggerData == null">{{
|
||
i.cycleTimeData[0].time
|
||
}}</span>
|
||
<span style="text-align: center" v-else>{{ i.triggerData.time }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="i.timeMode == '固定间隔'">
|
||
<div class="cardContent" v-if="i.cycleStatisticsData && i.cycleStatisticsData.length > 0">
|
||
<div class="count">
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '速度' && i.triggerData == null"
|
||
>
|
||
<span
|
||
v-if="
|
||
(i.cycleStatisticsData[0].speed && i.cycleStatisticsData[0].speed != -1) ||
|
||
i.cycleStatisticsData[0].speed === 0
|
||
"
|
||
>
|
||
{{
|
||
i.cycleStatisticsData[0].speed > 0 || i.cycleStatisticsData[0].speed === 0
|
||
? i.cycleStatisticsData[0].speed
|
||
: Math.abs(i.cycleStatisticsData[0].speed)
|
||
}}
|
||
</span>
|
||
<span v-else>-</span>
|
||
</span>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-else-if="i.componentType == '速度' && i.triggerData != null"
|
||
>
|
||
<span
|
||
v-if="
|
||
(i.triggerData.speed && i.triggerData.speed != -1) ||
|
||
i.triggerData.speed === 0
|
||
"
|
||
>
|
||
{{ Math.abs(i.triggerData.speed) }}
|
||
</span>
|
||
<span v-else>-</span>
|
||
</span>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '车头时距' && i.triggerData == null"
|
||
>{{
|
||
i.cycleStatisticsData[0].ave_headway ||
|
||
i.cycleStatisticsData[0].ave_headway === 0
|
||
? i.cycleStatisticsData[0].ave_headway == -1
|
||
? '-'
|
||
: i.cycleStatisticsData[0].ave_headway
|
||
: '-'
|
||
}}</span
|
||
>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-else-if="i.componentType == '车头时距' && i.triggerData != null"
|
||
>{{
|
||
i.triggerData.ave_headway || i.triggerData.ave_headway === 0
|
||
? i.triggerData.ave_headway == -1
|
||
? '-'
|
||
: i.triggerData.ave_headway
|
||
: '-'
|
||
}}</span
|
||
>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '流量' && i.triggerData == null"
|
||
>
|
||
<span v-if="i.flowType == '入流'">{{
|
||
i.cycleStatisticsData[0].in_flow || i.cycleStatisticsData[0].in_flow
|
||
? i.cycleStatisticsData[0].in_flow
|
||
: '-'
|
||
}}</span>
|
||
<span v-if="i.flowType == '出流'">{{
|
||
i.cycleStatisticsData[0].out_flow || i.cycleStatisticsData[0].out_flow
|
||
? i.cycleStatisticsData[0].out_flow
|
||
: '-'
|
||
}}</span>
|
||
</span>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-else-if="i.componentType == '流量' && i.triggerData != null"
|
||
>
|
||
<span v-if="i.flowType == '入流'">{{
|
||
i.triggerData.inFlow || i.triggerData.inFlow ? i.triggerData.inFlow : '-'
|
||
}}</span>
|
||
<span v-if="i.flowType == '出流'">{{
|
||
i.triggerData.outFlow || i.triggerData.outFlow ? i.triggerData.outFlow : '-'
|
||
}}</span>
|
||
</span>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '类型'"
|
||
>
|
||
<span
|
||
v-if="
|
||
!i.triggerData && i.cycleStatisticsData && i.cycleStatisticsData.length > 0
|
||
"
|
||
>
|
||
<!-- {{JSON.stringify(i.cycleStatisticsData)}} -->
|
||
<!-- {{
|
||
i.cycleStatisticsData[0].type_data[0].quantity +
|
||
i.cycleStatisticsData[0].type_data[1].quantity +
|
||
i.cycleStatisticsData[0].type_data[2].quantity
|
||
}} -->
|
||
{{
|
||
i.cycleStatisticsData[0].type_data &&
|
||
i.cycleStatisticsData[0].type_data.length > 0
|
||
? getTotal(i.cycleStatisticsData[0].type_data, 'quantity', 'value')
|
||
: '-'
|
||
}}
|
||
</span>
|
||
<span v-else-if="i.triggerData && i.triggerData.type_data">
|
||
<!-- {{i.triggerData[0].quantity + i.triggerData[1].quantity + i.triggerData[2].quantity}} -->
|
||
<!-- <span
|
||
v-if="
|
||
!Number.isNaN(
|
||
Number(
|
||
i.triggerData.type_data[0].quantity +
|
||
i.triggerData.type_data[1].quantity +
|
||
i.triggerData.type_data[2].quantity
|
||
)
|
||
)
|
||
"
|
||
>{{
|
||
i.triggerData.type_data[0].quantity +
|
||
i.triggerData.type_data[1].quantity +
|
||
i.triggerData.type_data[2].quantity
|
||
}}</span
|
||
>
|
||
<span v-else>0</span> -->
|
||
{{ getTotal(i.triggerData.type_data, 'quantity', 'value') }}
|
||
</span>
|
||
<span v-else>-</span>
|
||
</span>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '检测数' && i.triggerData == null"
|
||
>{{
|
||
i.cycleStatisticsData[0].ave_stay || i.cycleStatisticsData[0].ave_stay === 0
|
||
? i.cycleStatisticsData[0].ave_stay
|
||
: '-'
|
||
}}</span
|
||
>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-else-if="i.componentType == '检测数' && i.triggerData != null"
|
||
>{{
|
||
i.triggerData.ave_stay || i.triggerData.ave_stay === 0
|
||
? i.triggerData.ave_stay
|
||
: '-'
|
||
}}</span
|
||
>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '排队数' && i.triggerData == null"
|
||
>{{
|
||
i.cycleStatisticsData[0].ave_queue || i.cycleStatisticsData[0].ave_queue === 0
|
||
? i.cycleStatisticsData[0].ave_queue
|
||
: '-'
|
||
}}</span
|
||
>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '排队数' && i.triggerData != null"
|
||
>{{
|
||
i.triggerData.ave_queue || i.triggerData.ave_queue === 0
|
||
? i.triggerData.ave_queue
|
||
: '-'
|
||
}}</span
|
||
>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '延误' && i.triggerData == null"
|
||
>{{
|
||
i.cycleStatisticsData[0].ave_delay || i.cycleStatisticsData[0].ave_delay === 0
|
||
? i.cycleStatisticsData[0].ave_delay
|
||
: '-'
|
||
}}</span
|
||
>
|
||
<span
|
||
style="color: rgb(71, 161, 255); font-size: 23px"
|
||
v-if="i.componentType == '延误' && i.triggerData != null"
|
||
>{{
|
||
i.triggerData.ave_delay || i.triggerData.ave_delay === 0
|
||
? i.triggerData.ave_delay
|
||
: '-'
|
||
}}</span
|
||
>
|
||
<span
|
||
style="font-size: 14px"
|
||
v-if="i.componentType == '车头时距' || i.componentType == '延误'"
|
||
>秒</span
|
||
>
|
||
<span style="font-size: 13px" v-if="i.componentType == '速度'">
|
||
<span v-if="i.triggerData == null">
|
||
<span
|
||
v-if="
|
||
(i.cycleStatisticsData[0].speed &&
|
||
i.cycleStatisticsData[0].speed != -1) ||
|
||
i.cycleStatisticsData[0].speed === 0
|
||
"
|
||
>
|
||
{{
|
||
i.cycleStatisticsData[0].speed > 0 ||
|
||
i.cycleStatisticsData[0].speed === 0
|
||
? 'km/h'
|
||
: 'pix/s'
|
||
}}
|
||
</span>
|
||
</span>
|
||
<span v-else>
|
||
<span
|
||
v-if="
|
||
(i.triggerData.speed && i.triggerData.speed != -1) ||
|
||
i.triggerData.speed === 0
|
||
"
|
||
>
|
||
{{
|
||
i.triggerData.speed > 0 || i.triggerData.speed === 0 ? 'km/h' : 'pix/s'
|
||
}}
|
||
</span>
|
||
</span>
|
||
</span>
|
||
<span style="font-size: 14px" v-if="i.componentType == '类型'">个</span>
|
||
<span style="font-size: 14px" v-if="i.componentType == '流量'">辆</span>
|
||
<span
|
||
style="font-size: 14px"
|
||
v-if="i.componentType == '检测数' || i.componentType == '排队数'"
|
||
>辆</span
|
||
>
|
||
</div>
|
||
<div class="time">
|
||
<span style="text-align: center" v-if="i.triggerData == null">{{
|
||
i.cycleStatisticsData[0].time
|
||
}}</span>
|
||
<span style="text-align: center" v-else>{{ i.triggerData.time }}</span>
|
||
</div>
|
||
</div>
|
||
<el-empty :image-size="20" description="暂无数据" v-else></el-empty>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</div>
|
||
<div v-if="o.name == '图表区' && o.children.length != 0 && tabChangeIndex == y" class="chantArea">
|
||
<div class="chartSection">
|
||
<el-radio-group
|
||
v-model="o.selectOption"
|
||
class="buttonList"
|
||
@change="changeChat(o.children, o.selectOption)"
|
||
>
|
||
<el-radio-button v-for="(n, m) in o.children" :label="m + 1" :key="m"></el-radio-button>
|
||
</el-radio-group>
|
||
<!--初始化渲染图表-->
|
||
<div class="echartList">
|
||
<div :class="'echarts' + b" v-for="(e, b) in o.children" :key="b">
|
||
<div
|
||
style="width: 100%; height: 100%"
|
||
v-show="e.presentationForm == '时间曲线图' && o.selectOption == b + 1"
|
||
>
|
||
<div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
|
||
<span class="titleIcon"></span>
|
||
{{ e.name }}
|
||
</div>
|
||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
|
||
<chartsLine
|
||
:echartsRef="'echartsLine' + e.duocgqrhpzId"
|
||
:itemData="e"
|
||
style="width: 100%; height: 100%"
|
||
:intersectionName="intersectionName"
|
||
:chatShowType="chatShowType"
|
||
:componentType="e.componentType"
|
||
:timeMode="'实时触发'"
|
||
:flowType="e.flowType"
|
||
:dataList="e.triggerDataList"
|
||
ref="chartsLine"
|
||
v-if="e.triggerDataList"
|
||
/>
|
||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||
</div>
|
||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||
<chartsLine
|
||
:echartsRef="'echartsLine' + e.duocgqrhpzId"
|
||
:itemData="e"
|
||
style="width: 100%; height: 100%"
|
||
:intersectionName="intersectionName"
|
||
:chatShowType="chatShowType"
|
||
:timeMode="'固定时刻'"
|
||
:componentType="e.componentType"
|
||
:dataList="e.cycleTimeData"
|
||
:flowType="e.flowType"
|
||
v-if="e.cycleTimeData"
|
||
/>
|
||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||
</div>
|
||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
|
||
<chartsLine
|
||
:echartsRef="'echartsLine' + e.duocgqrhpzId"
|
||
style="width: 100%; height: 100%"
|
||
:itemData="e"
|
||
:intersectionName="intersectionName"
|
||
:chatShowType="chatShowType"
|
||
:timeMode="'固定间隔'"
|
||
:componentType="e.componentType"
|
||
:dataList="e.cycleStatisticsData"
|
||
:flowType="e.flowType"
|
||
v-if="e.cycleStatisticsData"
|
||
/>
|
||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="width: 100%; height: 100%"
|
||
v-show="e.presentationForm == '表格' && o.selectOption == b + 1"
|
||
>
|
||
<div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
|
||
<span class="titleIcon"></span>
|
||
{{ e.name }}
|
||
</div>
|
||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
|
||
<div style="width: 100%; height: 100%" v-if="e.graphicType == '断面'">
|
||
<tableShow :tableData="e.triggerDataList" :triggerType="e.timeMode" />
|
||
</div>
|
||
<div style="width: 100%; height: 100%" v-if="e.graphicType == '区域'">
|
||
<regionTable :tableData="e.triggerDataList" :triggerType="e.timeMode" />
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||
<div style="width: 100%; height: 100%" v-if="e.graphicType == '断面'">
|
||
<tableShow :tableData="e.cycleTimeData" :triggerType="e.timeMode" />
|
||
</div>
|
||
<div style="width: 100%; height: 100%" v-if="e.graphicType == '区域'">
|
||
<regionTable :tableData="e.cycleTimeData" :triggerType="e.timeMode" />
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
|
||
<div style="width: 100%; height: 100%" v-if="e.graphicType == '断面'">
|
||
<tableShow :tableData="e.cycleStatisticsData" :triggerType="e.timeMode" />
|
||
</div>
|
||
<div style="width: 100%; height: 100%" v-if="e.graphicType == '区域'">
|
||
<regionTable :tableData="e.cycleStatisticsData" :triggerType="e.timeMode" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
|
||
<el-table :data="e.triggerNewData" style="width: 100%; height: 100%" height="250">
|
||
<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">
|
||
</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>
|
||
</div>
|
||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||
<el-table :data="e.cycleTimeData" style="width: 100%; height: 100%" height="250">
|
||
<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">
|
||
</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>
|
||
</div>
|
||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
|
||
<el-table :data="e.cycleStatisticsData" style="width: 100%; height: 100%" height="250">
|
||
<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">
|
||
</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="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>
|
||
</div> -->
|
||
</div>
|
||
<div
|
||
style="width: 100%; height: 100%"
|
||
v-show="e.presentationForm == '饼状图' && o.selectOption == b + 1"
|
||
>
|
||
<div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
|
||
<span class="titleIcon"></span>
|
||
{{ e.name }}
|
||
</div>
|
||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
|
||
<chartsPie
|
||
:echartsRef="'echartsPie' + e.duocgqrhpzId"
|
||
style="width: 100%; height: 100%"
|
||
:chatShowType="chatShowType"
|
||
:dataList="e.triggerDataList"
|
||
:timeMode="'实时触发'"
|
||
:intersectionName="intersectionName"
|
||
v-if="e.triggerDataList"
|
||
/>
|
||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||
</div>
|
||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||
<chartsPie
|
||
:echartsRef="'echartsPie' + e.duocgqrhpzId"
|
||
style="width: 100%; height: 100%"
|
||
:chatShowType="chatShowType"
|
||
:dataList="e.cycleTimeData"
|
||
:timeMode="'固定时刻'"
|
||
:intersectionName="intersectionName"
|
||
v-if="e.cycleTimeData"
|
||
/>
|
||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||
</div>
|
||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
|
||
<chartsPie
|
||
:echartsRef="'echartsPie' + e.duocgqrhpzId"
|
||
style="width: 100%; height: 100%"
|
||
:chatShowType="chatShowType"
|
||
:timeMode="'固定间隔'"
|
||
:dataList="e.cycleStatisticsData"
|
||
:intersectionName="intersectionName"
|
||
v-if="e.cycleStatisticsData"
|
||
/>
|
||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="width: 100%; height: 100%"
|
||
v-if="e.presentationForm == '直方图' && o.selectOption == b + 1"
|
||
>
|
||
<div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
|
||
<span class="titleIcon"></span>
|
||
{{ e.name }}
|
||
</div>
|
||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
|
||
<chartsBar
|
||
:echartsRef="'echartsBar' + e.duocgqrhpzId"
|
||
style="width: 100%; height: 90%"
|
||
:chatShowType="chatShowType"
|
||
:timeMode="'实时触发'"
|
||
:intersectionName="intersectionName"
|
||
:dataList="e.triggerDataList"
|
||
v-if="e.triggerDataList"
|
||
/>
|
||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||
</div>
|
||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||
<chartsBar
|
||
:echartsRef="'echartsBar' + e.duocgqrhpzId"
|
||
style="width: 100%; height: 100%"
|
||
:chatShowType="chatShowType"
|
||
:dataList="e.cycleTimeData"
|
||
:timeMode="'固定时刻'"
|
||
:intersectionName="intersectionName"
|
||
v-if="e.cycleTimeData"
|
||
/>
|
||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||
</div>
|
||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
|
||
<chartsBar
|
||
:echartsRef="'echartsBar' + e.duocgqrhpzId"
|
||
style="width: 100%; height: 100%"
|
||
:timeMode="'固定间隔'"
|
||
:chatShowType="chatShowType"
|
||
:dataList="e.cycleStatisticsData"
|
||
:intersectionName="intersectionName"
|
||
v-if="e.cycleStatisticsData"
|
||
/>
|
||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="width: 100%; height: 100%"
|
||
v-show="e.presentationForm == '均值图' && o.selectOption == b + 1"
|
||
>
|
||
<div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
|
||
<span class="titleIcon"></span>
|
||
{{ e.name }}
|
||
</div>
|
||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
|
||
<meanValue
|
||
:echartsRef="'meanValue' + e.duocgqrhpzId"
|
||
style="width: 100%; height: 90%"
|
||
:chatShowType="chatShowType"
|
||
:intersectionName="intersectionName"
|
||
:dataList="e.triggerDataList"
|
||
v-if="e.triggerDataList"
|
||
/>
|
||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||
</div>
|
||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||
<meanValue
|
||
:echartsRef="'meanValue' + e.duocgqrhpzId"
|
||
style="width: 100%; height: 100%"
|
||
:chatShowType="chatShowType"
|
||
:dataList="e.cycleTimeData"
|
||
:intersectionName="intersectionName"
|
||
v-if="e.cycleTimeData"
|
||
/>
|
||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||
</div>
|
||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
|
||
<meanValue
|
||
:echartsRef="'meanValue' + e.duocgqrhpzId"
|
||
style="width: 100%; height: 100%"
|
||
:chatShowType="chatShowType"
|
||
:dataList="e.cycleStatisticsData"
|
||
:intersectionName="intersectionName"
|
||
v-if="e.cycleStatisticsData"
|
||
/>
|
||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="width: 100%; height: 100%"
|
||
v-show="e.presentationForm == '矩阵图' && o.selectOption == b + 1"
|
||
>
|
||
<div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
|
||
<span class="titleIcon"></span>
|
||
{{ e.name }}
|
||
</div>
|
||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
|
||
<thermalOD
|
||
:echartsRef="'thermalOD' + e.duocgqrhpzId"
|
||
style="width: 100%; height: 90%"
|
||
:chatShowType="chatShowType"
|
||
ref="thermalOD"
|
||
:timeMode="'实时触发'"
|
||
:startName="e.startSectionNames"
|
||
:endName="e.endSectionNames"
|
||
:dataList="e.triggerDataList"
|
||
:intersectionName="intersectionName"
|
||
v-if="e.triggerDataList"
|
||
/>
|
||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||
</div>
|
||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||
<thermalOD
|
||
:echartsRef="'thermalOD' + e.duocgqrhpzId"
|
||
style="width: 100%; height: 100%"
|
||
:chatShowType="chatShowType"
|
||
ref="thermalOD"
|
||
:timeMode="'固定时刻'"
|
||
:startName="e.startSectionNames"
|
||
:endName="e.endSectionNames"
|
||
:dataList="e.cycleTimeData"
|
||
:intersectionName="intersectionName"
|
||
v-if="e.cycleTimeData"
|
||
/>
|
||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||
</div>
|
||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
|
||
<thermalOD
|
||
:echartsRef="'thermalOD' + e.duocgqrhpzId"
|
||
style="width: 100%; height: 100%"
|
||
:chatShowType="chatShowType"
|
||
ref="thermalOD"
|
||
:timeMode="'固定间隔'"
|
||
:startName="e.startSectionNames"
|
||
:endName="e.endSectionNames"
|
||
:dataList="e.cycleStatisticsData"
|
||
:intersectionName="intersectionName"
|
||
v-if="e.cycleStatisticsData"
|
||
/>
|
||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--按钮切换渲染图表-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<!-- :before-close="handleClose" -->
|
||
<div class="dataConfiguration">
|
||
<el-dialog
|
||
title="数据分析区配置"
|
||
:visible.sync="centerDialogVisible"
|
||
:close-on-click-modal="false"
|
||
width="33%"
|
||
style="height: 90%"
|
||
:before-close="addSuccess"
|
||
center
|
||
>
|
||
<el-tree
|
||
:data="threeData"
|
||
node-key="id"
|
||
:props="defaultProps"
|
||
default-expand-all
|
||
:draggable="true"
|
||
:drag-drop="true"
|
||
:allow-drop="allowDrop"
|
||
@node-drop="nodeDrop"
|
||
@node-click="handleNodeClick"
|
||
:expand-on-click-node="false"
|
||
>
|
||
<span
|
||
class="custom-tree-node"
|
||
:style="{ background: getBackground(node) }"
|
||
slot-scope="{ node, data }"
|
||
v-if="node.level != 5 && node.level != 2 && node.level != 3 && node.level != 4"
|
||
>
|
||
<span
|
||
v-show="!data.showInput"
|
||
:id="data.duocgqrhpzId"
|
||
:style="{ 'font-size': getFontSize(node), color: getColor(node) }"
|
||
>
|
||
{{ node.label }}
|
||
</span>
|
||
<el-input
|
||
v-show="data.showInput"
|
||
v-model="data.label"
|
||
ref="inputVal"
|
||
:class="'input' + data.duocgqrhpzId"
|
||
@focus="focus($event)"
|
||
@blur="alters(node, data, $event)"
|
||
autofocus
|
||
></el-input>
|
||
<span class="btnbox">
|
||
<span class="spanbox">
|
||
<el-button size="medium" type="text">
|
||
<i class="el-icon-edit" @click="alter(node, data)" style="font-size: 18px"></i>
|
||
</el-button>
|
||
</span>
|
||
<span class="spanbox">
|
||
<el-button size="medium" type="text" @click="append(data, node)">
|
||
<i class="el-icon-circle-plus" style="font-size: 18px"></i>
|
||
</el-button>
|
||
</span>
|
||
<span class="spanbox">
|
||
<el-button size="medium" type="text" @click="remove(node, data)">
|
||
<i class="el-icon-delete-solid" style="font-size: 18px"></i>
|
||
</el-button>
|
||
</span>
|
||
</span>
|
||
</span>
|
||
<span
|
||
class="custom-tree-node"
|
||
:style="{ background: getBackground(node) }"
|
||
slot-scope="{ node, data }"
|
||
v-else-if="node.level == 2"
|
||
>
|
||
<span
|
||
:style="{ 'font-size': getFontSize(node), color: getColor(node) }"
|
||
v-show="!data.showInput"
|
||
:id="data.duocgqrhpzId"
|
||
>{{ node.label }}</span
|
||
>
|
||
<el-input
|
||
v-show="data.showInput"
|
||
ref="inputVal"
|
||
v-model="data.label"
|
||
:class="'input' + data.duocgqrhpzId"
|
||
@focus="focus($event)"
|
||
@input="(a) => inp(a, data)"
|
||
@blur="alters(node, data, $event)"
|
||
></el-input>
|
||
<span class="btnbox">
|
||
<span class="spanbox">
|
||
<el-button size="medium" type="text">
|
||
<i class="el-icon-edit" @click="alter(node, data)" style="font-size: 18px"></i>
|
||
</el-button>
|
||
</span>
|
||
<span class="spanbox"></span>
|
||
<span class="spanbox">
|
||
<el-button size="medium" type="text" @click="remove(node, data)">
|
||
<i class="el-icon-delete-solid" style="font-size: 18px"></i>
|
||
</el-button>
|
||
</span>
|
||
</span>
|
||
</span>
|
||
<span
|
||
class="custom-tree-node"
|
||
:style="{ background: getBackground(node) }"
|
||
slot-scope="{ node, data }"
|
||
v-else-if="node.level == 3"
|
||
>
|
||
<span
|
||
:style="{ 'font-size': getFontSize(node), color: getColor(node) }"
|
||
v-show="!data.showInput"
|
||
:id="data.duocgqrhpzId"
|
||
>{{ node.label }}</span
|
||
>
|
||
<el-input
|
||
v-show="data.showInput"
|
||
ref="inputVal"
|
||
v-model="data.label"
|
||
:class="'input' + data.duocgqrhpzId"
|
||
@focus="focus($event)"
|
||
@input="(a) => inp(a, data)"
|
||
@blur="alters(node, data, $event)"
|
||
></el-input>
|
||
<span class="btnbox">
|
||
<span class="spanbox"></span>
|
||
<span class="spanbox"
|
||
><el-button size="medium" type="text" @click="append(data, node)">
|
||
<i class="el-icon-circle-plus" style="font-size: 18px"></i> </el-button
|
||
></span>
|
||
<span class="spanbox"></span>
|
||
<!-- <el-button size="medium" type="text" @click="remove(node, data)">
|
||
<i class="el-icon-delete-solid" style="font-size: 18px"></i>
|
||
</el-button> -->
|
||
</span>
|
||
</span>
|
||
<span
|
||
class="custom-tree-node"
|
||
:style="{ background: getBackground(node) }"
|
||
slot-scope="{ node, data }"
|
||
v-else-if="
|
||
node.level == 4 && (node.label.includes('图') || node.label.includes('表格') || node.label.includes('数值'))
|
||
"
|
||
>
|
||
<span
|
||
:style="{ 'font-size': getFontSize(node), color: getColor(node) }"
|
||
v-show="!data.showInput"
|
||
:id="data.duocgqrhpzId"
|
||
>{{ node.label }}</span
|
||
>
|
||
<el-input
|
||
v-show="data.showInput"
|
||
ref="inputVal"
|
||
v-model="data.label"
|
||
:class="'input' + data.duocgqrhpzId"
|
||
@focus="focus($event)"
|
||
@input="(a) => inp(a, data)"
|
||
@blur="alters(node, data, $event)"
|
||
></el-input>
|
||
<span class="btnbox">
|
||
<span class="spanbox"></span>
|
||
<span class="spanbox"></span>
|
||
<span class="spanbox">
|
||
<el-button size="medium" type="text" @click="remove(node, data)">
|
||
<i class="el-icon-delete-solid" style="font-size: 18px"></i>
|
||
</el-button>
|
||
</span>
|
||
</span>
|
||
</span>
|
||
<span
|
||
class="custom-tree-node"
|
||
:style="{ background: getBackground(node) }"
|
||
slot-scope="{ node, data }"
|
||
v-else-if="
|
||
node.level == 4 && (!node.label.includes('图') || !node.label.includes('表格') || !node.label.includes('数值'))
|
||
"
|
||
>
|
||
<span
|
||
:style="{ 'font-size': getFontSize(node), color: getColor(node) }"
|
||
v-show="!data.showInput"
|
||
:id="data.duocgqrhpzId"
|
||
>{{ node.label }}</span
|
||
>
|
||
<el-input
|
||
v-show="data.showInput"
|
||
ref="inputVal"
|
||
v-model="data.label"
|
||
:class="'input' + data.duocgqrhpzId"
|
||
@focus="focus($event)"
|
||
@input="(a) => inp(a, data)"
|
||
@blur="alters(node, data, $event)"
|
||
></el-input>
|
||
<span class="btnbox">
|
||
<span class="spanbox">
|
||
<el-button size="medium" type="text">
|
||
<i class="el-icon-edit" @click="alter(node, data)" style="font-size: 18px"></i>
|
||
</el-button>
|
||
</span>
|
||
<span class="spanbox">
|
||
<el-button size="medium" type="text" @click="append(data, node)">
|
||
<i class="el-icon-circle-plus" style="font-size: 18px"></i>
|
||
</el-button>
|
||
</span>
|
||
<span class="spanbox">
|
||
<el-button size="medium" type="text" @click="remove(node, data)">
|
||
<i class="el-icon-delete-solid" style="font-size: 18px"></i>
|
||
</el-button>
|
||
</span>
|
||
</span>
|
||
</span>
|
||
<span class="custom-tree-node" :style="{ background: getBackground(node) }" slot-scope="{ node, data }" v-else>
|
||
<span
|
||
:style="{ 'font-size': getFontSize(node), color: getColor(node) }"
|
||
v-show="!data.showInput"
|
||
:id="data.duocgqrhpzId"
|
||
>{{ node.label }}</span
|
||
>
|
||
<el-input
|
||
v-show="data.showInput"
|
||
ref="inputVal"
|
||
v-model="data.label"
|
||
:class="'input' + data.duocgqrhpzId"
|
||
@focus="focus($event)"
|
||
@input="(a) => inp(a, data)"
|
||
@blur="alters(node, data, $event)"
|
||
></el-input>
|
||
<span class="btnbox">
|
||
<span class="spanbox"></span>
|
||
<span class="spanbox"></span>
|
||
<span class="spanbox">
|
||
<el-button size="medium" type="text" @click="remove(node, data)">
|
||
<i class="el-icon-delete-solid" style="font-size: 18px"></i>
|
||
</el-button>
|
||
</span>
|
||
</span>
|
||
</span>
|
||
</el-tree>
|
||
<!-- <div
|
||
style="
|
||
height: 6%;
|
||
text-align: center;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgb(64, 158, 255);
|
||
"
|
||
@click="addParentNode"
|
||
>
|
||
<img src="@/assets/img/AnalysisMain/add.png" style="height: 60%; width: 4%; cursor: pointer" />
|
||
</div> -->
|
||
<el-button size="medium" style="width: 100%" type="primary" plain @click="addParentNode"
|
||
><i class="el-icon-plus" style="font-size: 18px"></i
|
||
></el-button>
|
||
<span slot="footer" class="dialog-footer" style="display: flex; justify-content: center">
|
||
<!-- <el-button type="primary" @click="centerDialogVisible = false">取消</el-button> -->
|
||
<el-button @click="addSuccess" type="primary">关闭</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
<div class="addDialog">
|
||
<el-dialog :title="addTitle" :close-on-click-modal="false" :visible.sync="addDialogVisible" width="30%" center>
|
||
<el-form label-width="80px" :model="addForm">
|
||
<el-form-item label="节点名称:">
|
||
<el-input v-model="addForm.name"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="addDialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="addThreeNode">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
<div class="addChildDialog">
|
||
<el-dialog :title="addChartTitle" :visible.sync="addChildDialogVisible" :close-on-click-modal="false" width="30%" center>
|
||
<el-tree
|
||
:data="addChildThreeData"
|
||
:check-strictly="true"
|
||
node-key="componentId"
|
||
@node-click="addChildClick"
|
||
:props="addChildProps"
|
||
:default-expanded-keys="defaultExpanded"
|
||
>
|
||
<span class="custom-childTree-node" slot-scope="{ node, data }">
|
||
<template v-if="addChartTitle == '添加图表'">
|
||
<span v-if="node.level != 4"> {{ node.label }}</span>
|
||
<el-checkbox-group
|
||
v-model="checkList"
|
||
:disabled="
|
||
disabledCheckList.includes(
|
||
`${node.label},${node.parent.data.componentId},${node.parent.parent.parent.data.videoId}`
|
||
)
|
||
"
|
||
v-else
|
||
@change="changeChild(data, node)"
|
||
>
|
||
<el-checkbox
|
||
:label="
|
||
!data.componentId
|
||
? node.label + ',' + node.parent.data.componentId + ',' + node.parent.parent.parent.data.videoId
|
||
: data.componentId + ',' + node.parent.parent.parent.data.videoId
|
||
"
|
||
>
|
||
{{ node.label }}
|
||
</el-checkbox>
|
||
</el-checkbox-group>
|
||
</template>
|
||
<template v-if="addChartTitle == '添加分析项'">
|
||
<span v-if="node.level != 3"> {{ node.label }}</span>
|
||
<el-checkbox-group
|
||
v-model="checkList"
|
||
:disabled="disabledCheckList.includes(`${data.componentId},${node.parent.parent.data.videoId}`)"
|
||
v-else
|
||
@change="changeChild(data, node)"
|
||
>
|
||
<el-checkbox
|
||
:label="
|
||
!data.componentId
|
||
? node.label + ',' + node.parent.data.componentId + ',' + node.parent.parent.data.videoId
|
||
: data.componentId + ',' + node.parent.parent.data.videoId
|
||
"
|
||
>
|
||
{{ node.label }}
|
||
</el-checkbox>
|
||
</el-checkbox-group>
|
||
</template>
|
||
<!-- <el-checkbox-group
|
||
v-model="data.checked"
|
||
v-else
|
||
@change="changeChild(data, node)"
|
||
>
|
||
<el-checkbox :label="node.key" :disabled="data.disabled">
|
||
{{ node.label }}
|
||
</el-checkbox>
|
||
</el-checkbox-group> -->
|
||
|
||
<!-- <el-radio v-model="data.checked"
|
||
:label="node.key"
|
||
:disabled="data.disabled"
|
||
v-else>
|
||
{{ node.label }}
|
||
</el-radio> -->
|
||
</span>
|
||
</el-tree>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="addChildDialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="addChildNode">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
let id = 1000;
|
||
// import player from './player.vue';
|
||
import chartsLine from '@/components/sensorFusion/echartsLine.vue';
|
||
import chartsPie from '@/components/sensorFusion/echartsPie.vue';
|
||
import chartsBar from '@/components/sensorFusion/echartsBar.vue';
|
||
import MeanValue from '../../components/sensorFusion/meanValue.vue';
|
||
import thermalOD from '@/components/sensorFusion/thermalOD';
|
||
import tableShow from '@/components/sensorFusion/tableShow.vue';
|
||
import regionTable from '@/components/sensorFusion/regionTable.vue';
|
||
import {
|
||
getRealTimeShipjk, //获取实时视频
|
||
getDuocgqrhpz, //获取树形数据
|
||
getChartComponent, //获取图表
|
||
getNumericalComponent, //获取卡片
|
||
addDuocgqrhpz, //添加节点
|
||
deleteDuocgqrhpz, //删除节点
|
||
editDuocgqrhpzSort, //节点拖拽配许
|
||
editDuocgqrhpz, //编辑节点
|
||
getAssembly, // 获取多传感器融合
|
||
getSelectedComponent //获取已选的组件数据接口
|
||
} from '@/api/sensorFusion.js';
|
||
import { getVideoMode } from '@/api/index';
|
||
import qs from 'qs';
|
||
export default {
|
||
name: 'sensorFusion',
|
||
data() {
|
||
return {
|
||
offlineVideo: true,
|
||
checkList: [],
|
||
defaultExpanded: [], //默认展示数组
|
||
checkDataList: [],
|
||
addChartTitle: '', //分析项标题
|
||
addTitle: '', //添加标题
|
||
chatShowIndex: 1, //点击按钮记录索引
|
||
chatShowType: '', //点击单选按钮展示不同的图表
|
||
tableData: [], //表格数据
|
||
hovered: false, //鼠标悬浮显示全部内容
|
||
cardTitle: false, //鼠标悬浮显示二级标题
|
||
addDialogVisible: false, //添加节点弹窗
|
||
addChildDialogVisible: false, //添加子节点
|
||
addChildType: '', //用于判断添加子组件点击的是卡片区还是图表区
|
||
addChildParentId: '', //添加子组件保存点击的父组件id
|
||
centerDialogVisible: false, //数据配置弹窗
|
||
activeNames: ['1'], // 视频折叠
|
||
intersectionName: [], //数据分析名称
|
||
videoList: [],
|
||
loading: false,
|
||
intersectionList: [],
|
||
tabPosition: '1',
|
||
threeData: [],
|
||
defaultProps: {
|
||
children: 'children',
|
||
label: 'label'
|
||
}, //默认节点
|
||
addForm: {
|
||
name: ''
|
||
}, //添加表单名称
|
||
addChildProps: {
|
||
// children: 'children',
|
||
// label: 'label',
|
||
children: 'data',
|
||
label: 'videoName',
|
||
checked: 'checked'
|
||
},
|
||
addChildThreeData: [
|
||
// {
|
||
// id: 1,
|
||
// label: '一级 1',
|
||
// checked: false,
|
||
// children: [
|
||
// {
|
||
// id: 4,
|
||
// label: '二级 1-1',
|
||
// checked: false,
|
||
// children: [
|
||
// {
|
||
// id: 9,
|
||
// label: '三级 1-1-1',
|
||
// checked: false
|
||
// },
|
||
// {
|
||
// id: 10,
|
||
// label: '三级 1-1-2',
|
||
// checked: false
|
||
// }
|
||
// ]
|
||
// }
|
||
// ]
|
||
// },
|
||
// {
|
||
// id: 2,
|
||
// label: '一级 2',
|
||
// checked: false,
|
||
// children: [
|
||
// {
|
||
// id: 5,
|
||
// label: '二级 2-1',
|
||
// checked: false
|
||
// },
|
||
// {
|
||
// id: 6,
|
||
// label: '二级 2-2',
|
||
// checked: false
|
||
// }
|
||
// ]
|
||
// },
|
||
// {
|
||
// id: 3,
|
||
// label: '一级 3',
|
||
// checked: false,
|
||
// children: [
|
||
// {
|
||
// id: 7,
|
||
// label: '二级 3-1',
|
||
// checked: false
|
||
// },
|
||
// {
|
||
// id: 8,
|
||
// label: '二级 3-2',
|
||
// checked: false
|
||
// }
|
||
// ]
|
||
// }
|
||
],
|
||
addThreeNodeData: {
|
||
data: null,
|
||
node: null
|
||
},
|
||
addThreeChildData: {
|
||
data: null,
|
||
node: null
|
||
},
|
||
addParent: false, //最父节点
|
||
addParentSort: 0, //最父节点排序
|
||
addOneSort: 0, //一级节点排序
|
||
addTwoSort: 0, //卡片区下面的节点排序
|
||
addCardSort: 0, //卡片区排序
|
||
addChartSort: 0, //图表区排序
|
||
draggingNodeList: null, //为确保拖拽完成之后调用接口 所以保存拖拽的节点
|
||
tabChangeIndex: 0, //tab切换事件
|
||
topicSends: [], //mqtt订阅数组
|
||
topicVideoIdList: [],
|
||
triggerDataList: [], //触发mqtt数据
|
||
triggerFlowData: [], //触发mqtt数据
|
||
triggerSpeedData: [], //触发速度mqtt数据
|
||
triggerTypeData: [], //触发类型数据
|
||
triggerNStayData: [], //触发检测数数据
|
||
triggerNQueueData: [], //触发排队数数据
|
||
triggerODData: [], //触发OD数据
|
||
triggerYWData: [], //mqtt延误
|
||
disabledCheckList: [] //tree不可选数组
|
||
};
|
||
},
|
||
created() {
|
||
this.getVideoType();
|
||
},
|
||
mounted() {
|
||
//获取视频列表
|
||
this.getRealTimeShipjk();
|
||
//获取多融合数据
|
||
this.getSensorFusionData();
|
||
},
|
||
methods: {
|
||
//获取视频源类型
|
||
getVideoType() {
|
||
this.loading = true;
|
||
getVideoMode()
|
||
.then((res) => {
|
||
//console.log('res', res.data.data);
|
||
if (res.data.data && res.data.data == '实时视频') {
|
||
this.offlineVideo = false;
|
||
}
|
||
})
|
||
.finally(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
//类型数据累计
|
||
getTotal(arr, field, field2) {
|
||
let total = 0;
|
||
if (arr && arr.length > 0) {
|
||
total = arr.reduce((accumulator, item) => {
|
||
let t = 0;
|
||
if (item[field] || item[field] === 0) {
|
||
t = item[field];
|
||
}
|
||
if (item[field2] || item[field2] === 0) {
|
||
t = item[field2];
|
||
}
|
||
|
||
if (t || t === 0) {
|
||
const fieldValue = parseFloat(t);
|
||
if (!isNaN(fieldValue)) {
|
||
return accumulator + fieldValue;
|
||
}
|
||
}
|
||
return accumulator; // 如果无效则不累加
|
||
}, 0);
|
||
}
|
||
|
||
return total;
|
||
},
|
||
//获取视频列表接口
|
||
getRealTimeShipjk() {
|
||
getRealTimeShipjk().then((res) => {
|
||
this.videoList = res.data.data;
|
||
});
|
||
},
|
||
//获取多融合传感器融合数据
|
||
getSensorFusionData() {
|
||
this.loading = true;
|
||
getAssembly({
|
||
Number: 10
|
||
})
|
||
.then((res) => {
|
||
if (res.data.data && res.data.data.length > 0) {
|
||
this.intersectionList = this.addSelectOptionField(res.data.data) || [];
|
||
// this.addSelectOptionField(this.intersectionList);
|
||
// this.addTriggerDataField(this.intersectionList);
|
||
//mqtt订阅
|
||
this.$nextTick(() => {
|
||
this.getMqtt();
|
||
});
|
||
|
||
//console.log(this.intersectionList, 'this.intersectionList');
|
||
//开发路口默认展开第一个
|
||
this.$nextTick(() => {
|
||
if (this.intersectionList.length > 0) {
|
||
let children = this.intersectionList[0].children || [];
|
||
if (children.length > 0) {
|
||
this.intersectionName = [children[0].name];
|
||
}
|
||
}
|
||
});
|
||
}
|
||
})
|
||
.finally(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
//每个都添加option
|
||
addSelectOptionField(obj) {
|
||
if (Array.isArray(obj)) {
|
||
obj.forEach((item) => {
|
||
this.addSelectOptionField(item);
|
||
});
|
||
} else if (typeof obj == 'object') {
|
||
for (let key in obj) {
|
||
if (typeof obj[key] == 'object') {
|
||
this.addSelectOptionField(obj[key]);
|
||
} else if (key == 'name') {
|
||
obj['selectOption'] = 1;
|
||
}
|
||
}
|
||
}
|
||
return obj;
|
||
},
|
||
addTriggerDataField(obj) {
|
||
if (Array.isArray(obj)) {
|
||
obj.forEach((item) => {
|
||
this.addTriggerDataField(item);
|
||
});
|
||
} else if (typeof obj == 'object') {
|
||
for (let key in obj) {
|
||
if (typeof obj[key] == 'object') {
|
||
this.addTriggerDataField(obj[key]);
|
||
} else if (key == 'name') {
|
||
obj['triggerData'] = '';
|
||
}
|
||
}
|
||
}
|
||
},
|
||
//获取所有配置节点
|
||
getDuocgqrhpz() {
|
||
let threeDataList = [];
|
||
getDuocgqrhpz().then((res) => {
|
||
if (res.data.code == 200) {
|
||
this.threeData = this.replaceNameWithLabel(res.data.data);
|
||
this.addShowInputField(this.threeData);
|
||
// this.threeData = threeDataList;
|
||
for (let i = 0; i < this.threeData.length; i++) {
|
||
this.addParentSort = this.threeData[i].sort;
|
||
}
|
||
//console.log(this.threeData, 'this.threeData');
|
||
} else {
|
||
this.$message.warning(res.data.msg);
|
||
}
|
||
});
|
||
},
|
||
// 将接口中的所有name字段变为label字段
|
||
replaceNameWithLabel(obj) {
|
||
if (Array.isArray(obj)) {
|
||
return obj.map((item) => {
|
||
if (typeof item == 'object') {
|
||
return this.replaceNameWithLabel(item);
|
||
} else {
|
||
return item;
|
||
}
|
||
});
|
||
} else if (typeof obj == 'object') {
|
||
const newObj = {};
|
||
for (let key in obj) {
|
||
if (typeof obj[key] == 'object') {
|
||
newObj[key] = this.replaceNameWithLabel(obj[key]);
|
||
} else if (key == 'name') {
|
||
newObj['label'] = obj[key];
|
||
} else {
|
||
newObj[key] = obj[key];
|
||
}
|
||
}
|
||
return newObj;
|
||
} else {
|
||
return obj;
|
||
}
|
||
},
|
||
|
||
//添加showInput字段
|
||
addShowInputField(obj) {
|
||
if (Array.isArray(obj)) {
|
||
obj.forEach((item) => {
|
||
this.addShowInputField(item);
|
||
});
|
||
} else if (typeof obj == 'object') {
|
||
for (let key in obj) {
|
||
if (typeof obj[key] == 'object') {
|
||
this.addShowInputField(obj[key]);
|
||
} else if (key == 'label') {
|
||
obj['showInput'] = false;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
//子添加checked字段
|
||
addCheckedField(obj) {
|
||
if (Array.isArray(obj)) {
|
||
obj.forEach((item) => {
|
||
this.addCheckedField(item);
|
||
});
|
||
} else if (typeof obj === 'object') {
|
||
for (let key in obj) {
|
||
if (typeof obj[key] === 'object') {
|
||
this.addCheckedField(obj[key]);
|
||
} else if (key === 'videoName') {
|
||
obj['checked'] = false;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
//配置弹窗点击事件
|
||
handleDialog() {
|
||
this.threeData = [];
|
||
this.getDuocgqrhpz();
|
||
this.centerDialogVisible = true;
|
||
},
|
||
//折叠面板点击展开事件
|
||
handleCollapseChange(val) {
|
||
//console.log(val, '折叠面板展开事件', this.intersectionName);
|
||
this.intersectionName = val;
|
||
},
|
||
handleNodeClick(nodeData) {},
|
||
|
||
//层级标题不同
|
||
getFontSize(node) {
|
||
// 根据节点层级返回对应的字体大小
|
||
// 可以根据需要定义自己的逻辑
|
||
// 这里只是简单示例，可以根据具体的需求进行修改
|
||
if (
|
||
(node.level != 2 &&
|
||
node.level != 3 &&
|
||
node.level == 4 &&
|
||
(node.label.includes('图') || node.label.includes('表格') || node.label.includes('数值'))) ||
|
||
node.level == 5 ||
|
||
node.level == 1
|
||
) {
|
||
return '14px';
|
||
} else if (node.level == 4 && (!node.label.includes('图') || !node.label.includes('表格') || node.label.includes('数值'))) {
|
||
return '16px'; // 四级卡片
|
||
} else {
|
||
return '16px';
|
||
}
|
||
},
|
||
//改变颜色
|
||
getColor(node) {
|
||
if (
|
||
(node.level != 2 &&
|
||
node.level != 3 &&
|
||
node.level == 4 &&
|
||
(node.label.includes('图') || node.label.includes('表格') || node.label.includes('数值'))) ||
|
||
node.level == 5
|
||
) {
|
||
return 'rgb(172,172,172)';
|
||
} else if (node.level == 4 && (!node.label.includes('图') || !node.label.includes('表格') || node.label.includes('数值'))) {
|
||
return 'rgb(116,116,116)'; // 四级卡片
|
||
} else {
|
||
return 'rgb(116,116,116)';
|
||
}
|
||
},
|
||
//设置背景色
|
||
getBackground(node) {
|
||
if (node.level == 1) {
|
||
return 'rgba(172,172,172,0.2)';
|
||
} else if (node.level == 3) {
|
||
if (node.label == '卡片区') {
|
||
return 'rgba(255,241,229,0.7)';
|
||
} else {
|
||
return 'rgba(237,255,229,0.7)';
|
||
}
|
||
}
|
||
},
|
||
//只能选中同级排序
|
||
allowDrop(draggingNode, dropNode, type) {
|
||
//注掉的是同级拖拽
|
||
if (draggingNode.level === dropNode.level) {
|
||
//console.log('拖拽');
|
||
return type === 'prev' || type === 'next';
|
||
} else {
|
||
// 不同级进行处理
|
||
return false;
|
||
}
|
||
},
|
||
//排序编辑完成
|
||
nodeDrop(data, dropPosition, event) {
|
||
let dataList = [];
|
||
if (dropPosition.level != 1) {
|
||
for (let i = 0; i < dropPosition.parent.data.children.length; i++) {
|
||
dataList.push({
|
||
DuocgqrhpzId: dropPosition.parent.data.children[i].duocgqrhpzId,
|
||
Sort: i + 1
|
||
});
|
||
}
|
||
} else {
|
||
for (let i = 0; i < this.threeData.length; i++) {
|
||
dataList.push({
|
||
DuocgqrhpzId: this.threeData[i].duocgqrhpzId,
|
||
Sort: i + 1
|
||
});
|
||
}
|
||
}
|
||
editDuocgqrhpzSort(dataList)
|
||
.then((res) => {
|
||
if (res.data.code == 200) {
|
||
this.$message.success(res.data.msg);
|
||
} else {
|
||
this.$message.warning(res.data.msg);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
//console.log(err);
|
||
});
|
||
},
|
||
//将子组件得名称统一
|
||
renameField(obj, oldFieldName, newFieldName) {
|
||
if (Array.isArray(obj)) {
|
||
obj.forEach((item) => {
|
||
this.renameField(item, oldFieldName, newFieldName);
|
||
});
|
||
} else if (typeof obj === 'object') {
|
||
for (let key in obj) {
|
||
if (typeof obj[key] === 'object') {
|
||
this.renameField(obj[key], oldFieldName, newFieldName);
|
||
} else if (key === oldFieldName) {
|
||
obj[newFieldName] = obj[key];
|
||
delete obj[key];
|
||
}
|
||
}
|
||
}
|
||
},
|
||
// 树形节点得添加删除
|
||
append(data, node) {
|
||
this.checkList = []; //多选数据为空
|
||
this.defaultExpanded = [];
|
||
this.addOneSort = 0; //一级节点排序
|
||
this.addTwoSort = 0; //卡片区下面的节点排序
|
||
this.addCardSort = 0; //卡片区排序
|
||
this.addChartSort = 0; //图表区排序
|
||
this.addChildThreeData = [];
|
||
this.addParent = false;
|
||
if (data.label == '图表区') {
|
||
this.addChartTitle = '添加图表';
|
||
this.addChildType = data.label;
|
||
//父id
|
||
this.addChildParentId = data.duocgqrhpzId;
|
||
this.addChildDialogVisible = true;
|
||
getChartComponent().then((res) => {
|
||
//吧子数组变成想要的
|
||
let transformedData = res.data.data.map((item) => {
|
||
// let newData = {
|
||
// videoId: item.videoId,
|
||
// videoName: item.videoName,
|
||
// data: item.data.map((subItem) => {
|
||
// let presentationForms = subItem.presentationForm.split(',');
|
||
// return {
|
||
// componentId: subItem.componentId,
|
||
// componentName: subItem.componentName,
|
||
// interfaceComponentId: subItem.interfaceComponentId,
|
||
// presentationForm: subItem.presentationForm,
|
||
// data: presentationForms.map((form) => ({ videoName: form }))
|
||
// };
|
||
// })
|
||
// };
|
||
// return newData;
|
||
const newData = item.data.reduce((acc, obj) => {
|
||
const existingData = acc.find((entry) => entry.combinationName === obj.combinationName);
|
||
let presentationForms = obj.presentationForm.split(',');
|
||
if (existingData) {
|
||
existingData.data.push({
|
||
componentId: obj.componentId,
|
||
componentName: obj.componentName,
|
||
interfaceComponentId: obj.interfaceComponentId,
|
||
presentationForm: obj.presentationForm,
|
||
data: presentationForms.map((form) => ({ videoName: form }))
|
||
});
|
||
} else {
|
||
acc.push({
|
||
combinationName: obj.combinationName,
|
||
data: [
|
||
{
|
||
componentId: obj.componentId,
|
||
componentName: obj.componentName,
|
||
interfaceComponentId: obj.interfaceComponentId,
|
||
presentationForm: obj.presentationForm,
|
||
data: presentationForms.map((form) => ({ videoName: form }))
|
||
}
|
||
]
|
||
});
|
||
}
|
||
return acc;
|
||
}, []);
|
||
return {
|
||
...item,
|
||
data: newData
|
||
};
|
||
});
|
||
this.renameField(transformedData, 'combinationName', 'videoName');
|
||
this.renameField(transformedData, 'componentName', 'videoName');
|
||
this.addCheckedField(transformedData);
|
||
this.addChildThreeData = transformedData;
|
||
// this.addChildThreeData.map((item) => {
|
||
// item.data.map((key) => {
|
||
// key.data = key.data.filter((d) => d.videoName != '数值');
|
||
// });
|
||
// });
|
||
this.addChildThreeData.map((item) => {
|
||
item.data.map((key) => {
|
||
key.data.map((t) => {
|
||
t.data = t.data.filter((d) => d.videoName != '数值');
|
||
});
|
||
});
|
||
});
|
||
// console.log(this.addChildThreeData, ' this.addChildThreeData');
|
||
});
|
||
this.addThreeNodeData.data = data;
|
||
this.addThreeNodeData.node = node;
|
||
for (let i = 0; i < this.addThreeNodeData.data.children.length; i++) {
|
||
this.addChartSort = this.addThreeNodeData.data.children[i].sort;
|
||
}
|
||
this.disabledCheckList = [];
|
||
getSelectedComponent({
|
||
DuocgqrhpzId: data.duocgqrhpzId
|
||
}).then((res) => {
|
||
res.data.data.forEach((item) => {
|
||
this.checkList.push(`${item.presentationForm},${item.analogAreaComponentId},${item.videoId}`);
|
||
this.disabledCheckList.push(`${item.presentationForm},${item.analogAreaComponentId},${item.videoId}`);
|
||
this.defaultExpanded.push(item.analogAreaComponentId);
|
||
// item.data.forEach((subItem) => {
|
||
// const labels = subItem.presentationForm.split(",");
|
||
// labels.forEach((label) => {
|
||
// if (label != "数值") {
|
||
// this.checkList.push(
|
||
// `${label},${subItem.componentId},${item.videoId}`
|
||
// );
|
||
// }
|
||
// });
|
||
// });
|
||
});
|
||
// console.log(this.disabledCheckList, ' this.disabledCheckList');
|
||
// console.log(this.checkList, ' this.disabledCheckList');
|
||
});
|
||
} else if (node.level == 4) {
|
||
this.addChartTitle = '添加分析项';
|
||
this.addChildType = '';
|
||
//父id
|
||
this.addChildParentId = data.duocgqrhpzId;
|
||
this.addChildDialogVisible = true;
|
||
getNumericalComponent().then((res) => {
|
||
this.renameField(res.data.data, 'componentName', 'videoName');
|
||
//吧子数组变成想要的
|
||
const transformedData = res.data.data.map((item) => {
|
||
const newData = item.data.reduce((acc, obj) => {
|
||
const existingData = acc.find((entry) => entry.combinationName === obj.combinationName);
|
||
if (existingData) {
|
||
existingData.data.push({
|
||
componentId: obj.componentId,
|
||
videoName: obj.videoName
|
||
});
|
||
} else {
|
||
acc.push({
|
||
combinationName: obj.combinationName,
|
||
data: [
|
||
{
|
||
componentId: obj.componentId,
|
||
videoName: obj.videoName
|
||
}
|
||
]
|
||
});
|
||
}
|
||
return acc;
|
||
}, []);
|
||
|
||
return {
|
||
...item,
|
||
data: newData
|
||
};
|
||
});
|
||
this.renameField(transformedData, 'combinationName', 'videoName');
|
||
this.addCheckedField(transformedData);
|
||
this.addChildThreeData = transformedData;
|
||
//添加checked字段
|
||
});
|
||
this.addThreeNodeData.data = data;
|
||
this.addThreeNodeData.node = node;
|
||
for (let i = 0; i < this.addThreeNodeData.data.children.length; i++) {
|
||
this.addCardSort = this.addThreeNodeData.data.children[i].sort;
|
||
}
|
||
this.disabledCheckList = [];
|
||
getSelectedComponent({
|
||
DuocgqrhpzId: data.duocgqrhpzId
|
||
}).then((res) => {
|
||
res.data.data.forEach((item) => {
|
||
this.checkList.push(`${item.analogAreaComponentId},${item.videoId}`);
|
||
this.disabledCheckList.push(`${item.analogAreaComponentId},${item.videoId}`);
|
||
this.defaultExpanded.push(item.analogAreaComponentId);
|
||
// item.data.forEach((subItem) => {
|
||
// // const labels = subItem.presentationForm.split(",");
|
||
// // labels.forEach((label) => {
|
||
// if (subItem.presentationForm.includes("数值")) {
|
||
// this.checkList.push(
|
||
// `${subItem.componentName},${subItem.componentId},${item.videoId}`
|
||
// );
|
||
// }
|
||
// // });
|
||
// });
|
||
});
|
||
});
|
||
} else {
|
||
//给普通节点赋值
|
||
this.addChildType = '';
|
||
this.addThreeNodeData.data = data;
|
||
this.addThreeNodeData.node = node;
|
||
this.addDialogVisible = true;
|
||
this.addForm.name = '';
|
||
if (this.addThreeNodeData.node.level == 1) {
|
||
this.addTitle = '添加';
|
||
for (let i = 0; i < this.addThreeNodeData.data.children.length; i++) {
|
||
this.addOneSort = this.addThreeNodeData.data.children[i].sort;
|
||
}
|
||
} else if (this.addThreeNodeData.node.level == 3) {
|
||
this.addTitle = '添加卡片';
|
||
for (let i = 0; i < this.addThreeNodeData.data.children.length; i++) {
|
||
this.addTwoSort = this.addThreeNodeData.data.children[i].sort;
|
||
}
|
||
}
|
||
}
|
||
// getSelectedComponent
|
||
// const newChild = { id: id++, label: 'testtest', children: [] };
|
||
// if (!data.children) {
|
||
// this.$set(data, 'children', []);
|
||
// }
|
||
// data.children.push(newChild);
|
||
},
|
||
//最子节点选中事件
|
||
changeChild(data, node) {
|
||
// if (
|
||
// (this.checkList.length >= 6 && this.addChildType != "图表区") ||
|
||
// (this.checkList.length >= 8 && this.addChildType == "图表区")
|
||
// ) {
|
||
// this.$message.warning("组件类型添加上限!");
|
||
// }
|
||
//给节点赋值
|
||
this.addThreeChildData.data = data;
|
||
this.addThreeChildData.node = node;
|
||
//console.log(this.addThreeChildData.data, 'this.addThreeChildData.node', this.addThreeChildData.node);
|
||
},
|
||
//最子节点添加
|
||
addChildNode() {
|
||
this.checkDataList = [];
|
||
//给添加多选的赋值
|
||
|
||
//console.log(this.checkDataList, 'this.checkDataList');
|
||
let params = {
|
||
ParentId: '',
|
||
Name: '',
|
||
Type: '',
|
||
Sort: '',
|
||
// AnalogAreaComponentId: "",
|
||
// PresentationForm: "", //展现形式
|
||
// VideoId: "",
|
||
list: []
|
||
};
|
||
if (this.addChildType == '图表区') {
|
||
this.checkDataList = this.checkList.map((item, index) => {
|
||
let parts = item.split(',');
|
||
return {
|
||
AnalogAreaComponentId: parts[1],
|
||
PresentationForm: parts[0],
|
||
VideoId: parts[2],
|
||
Sort: index + 1
|
||
};
|
||
});
|
||
params = {
|
||
ParentId: this.addChildParentId,
|
||
Name: '',
|
||
Type: 2,
|
||
Sort: '',
|
||
// AnalogAreaComponentId: this.addThreeChildData.node.parent.data.componentId,
|
||
// PresentationForm: this.addThreeChildData.data.videoName, //展现形式
|
||
// VideoId: this.addThreeChildData.node.parent.parent.data.videoId,
|
||
list: this.checkDataList
|
||
};
|
||
} else {
|
||
this.checkDataList = this.checkList.map((item, index) => {
|
||
let parts = item.split(',');
|
||
return {
|
||
AnalogAreaComponentId: parts[0],
|
||
PresentationForm: '',
|
||
VideoId: parts[1],
|
||
Sort: index + 1
|
||
};
|
||
});
|
||
params = {
|
||
ParentId: this.addChildParentId,
|
||
Name: '',
|
||
Type: 2,
|
||
Sort: '',
|
||
// AnalogAreaComponentId: this.addThreeChildData.data.componentId,
|
||
// PresentationForm: "", //展现形式
|
||
// VideoId: this.addThreeChildData.node.parent.parent.data.videoId,
|
||
list: this.checkDataList
|
||
};
|
||
}
|
||
// if (
|
||
// (this.checkDataList.length >= 6 && this.addChildType != "图表区") ||
|
||
// (this.checkDataList.length >= 8 && this.addChildType == "图表区")
|
||
// ) {
|
||
// this.$message.warning("组件类型添加上限!");
|
||
// return false;
|
||
// } else {
|
||
addDuocgqrhpz(params)
|
||
.then((res) => {
|
||
if (res.data.code == 200) {
|
||
this.$message.success(res.data.msg);
|
||
this.addChildDialogVisible = false;
|
||
this.threeData = [];
|
||
this.getDuocgqrhpz();
|
||
} else {
|
||
this.$message.warning(res.data.msg);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
//console.log(err);
|
||
});
|
||
// }
|
||
},
|
||
//删除节点
|
||
remove(node, data) {
|
||
this.$confirm('确认删除此节点, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
})
|
||
.then(() => {
|
||
deleteDuocgqrhpz({
|
||
DuocgqrhpzId: data.duocgqrhpzId
|
||
})
|
||
.then((res) => {
|
||
if (res.data.code == 200) {
|
||
this.$message.success('删除成功');
|
||
// const parent = node.parent;
|
||
// const children = parent.data.children || parent.data;
|
||
// const index = children.findIndex((d) => d.id === data.id);
|
||
// children.splice(index, 1);
|
||
this.threeData = [];
|
||
this.getDuocgqrhpz();
|
||
} else {
|
||
this.$message.warning(res.data.msg);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
//console.log(err);
|
||
});
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '取消删除'
|
||
});
|
||
});
|
||
},
|
||
//卡片区单选择
|
||
addChildClick(data) {
|
||
// 将其他节点的选中状态设为 false
|
||
this.traverseTree(this.addChildThreeData, (node) => {
|
||
if (node !== data) {
|
||
node.checked = false;
|
||
}
|
||
});
|
||
},
|
||
traverseTree(nodes, callback) {
|
||
// 递归遍历树节点
|
||
for (let i = 0; i < nodes.length; i++) {
|
||
const node = nodes[i];
|
||
callback(node);
|
||
if (node.data) {
|
||
this.traverseTree(node.data, callback);
|
||
}
|
||
}
|
||
},
|
||
//父节点添加
|
||
addParentNode() {
|
||
this.addTitle = '添加';
|
||
this.addParent = true;
|
||
this.addDialogVisible = true;
|
||
this.addForm.name = '';
|
||
this.addThreeNodeData.data = null;
|
||
this.addThreeNodeData.node = null;
|
||
},
|
||
//普通输入框添加节点
|
||
addThreeNode() {
|
||
//console.log(this.addThreeNodeData.data, 'this.addThreeNodeData.data');
|
||
let params = {
|
||
ParentId: '',
|
||
Name: '',
|
||
Type: '',
|
||
Sort: ''
|
||
};
|
||
let sort = 0;
|
||
if (this.addParent) {
|
||
params = {
|
||
ParentId: 0,
|
||
Name: this.addForm.name,
|
||
Type: 0,
|
||
Sort: this.addParentSort + 1
|
||
};
|
||
} else {
|
||
let type = 0;
|
||
if (this.addThreeNodeData.node.level == 1) {
|
||
type = 1;
|
||
sort = this.addOneSort + 1;
|
||
} else if (this.addThreeNodeData.node.level == 3) {
|
||
sort = this.addTwoSort + 1;
|
||
}
|
||
params = {
|
||
ParentId: this.addThreeNodeData.data.duocgqrhpzId,
|
||
Name: this.addForm.name,
|
||
Type: type,
|
||
Sort: sort
|
||
};
|
||
}
|
||
if (this.addThreeNodeData.data != null && this.addThreeNodeData.data.children.length >= 3) {
|
||
this.$message.warning('卡片区最多只能添加3个!');
|
||
return false;
|
||
} else {
|
||
// qs.stringify(params)
|
||
addDuocgqrhpz(params)
|
||
.then((res) => {
|
||
if (res.data.code == 200) {
|
||
this.$message.success(res.data.msg);
|
||
this.addDialogVisible = false;
|
||
this.threeData = [];
|
||
this.getDuocgqrhpz();
|
||
} else {
|
||
this.$message.warning(res.data.msg);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
//console.log(err);
|
||
});
|
||
}
|
||
},
|
||
// //获得焦点
|
||
focus(event) {
|
||
// //console.log(event);
|
||
event.currentTarget.select();
|
||
},
|
||
//修改功能 inp
|
||
inp(value, data) {
|
||
data.label = value;
|
||
},
|
||
//失去焦点后
|
||
alters(node, data) {
|
||
//console.log(data.label, '失去焦点');
|
||
data.showInput = false;
|
||
const label = document.getElementById(data.duocgqrhpzId);
|
||
const changeinput = document.querySelector('.input' + data.duocgqrhpzId);
|
||
changeinput.style.display = 'none';
|
||
label.style.display = 'block';
|
||
// this.focus(event)
|
||
// this.$nextTick(function() { // //DOM 更新了
|
||
// this.$refs.inputVal.focus();
|
||
// });
|
||
let params = {
|
||
DuocgqrhpzId: data.duocgqrhpzId,
|
||
Name: data.label
|
||
};
|
||
editDuocgqrhpz(qs.stringify(params))
|
||
.then((res) => {
|
||
if (res.data.code == 200) {
|
||
this.$message.success(res.data.msg);
|
||
} else {
|
||
this.$message.warning(res.data.msg);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
//console.log(err);
|
||
});
|
||
},
|
||
alter(node, data) {
|
||
//console.log(data, '编辑', this.threeData);
|
||
data.showInput = true;
|
||
const label = document.getElementById(data.duocgqrhpzId);
|
||
const changeinput = document.querySelector('.input' + data.duocgqrhpzId);
|
||
changeinput.style.display = 'block';
|
||
label.style.display = 'none';
|
||
// this.focus(event)
|
||
this.$nextTick(() => {
|
||
if (changeinput) {
|
||
changeinput.focus();
|
||
}
|
||
});
|
||
},
|
||
//鼠标悬浮
|
||
showTooltip(id) {
|
||
// const hover = document.querySelector('.hovered' + id);
|
||
if (id) {
|
||
const title = document.querySelector('.tooltip' + id);
|
||
|
||
this.$nextTick(() => {
|
||
title.style.position = 'absolute';
|
||
title.style.display = 'block';
|
||
title.style.backgroundColor = '#f7f7f7';
|
||
title.style.border = '1px solid #ccc';
|
||
});
|
||
}
|
||
},
|
||
//鼠标移出
|
||
hideTooltip(id) {
|
||
// const title = document.querySelector('.tooltip' + id);
|
||
if (id) {
|
||
const title = document.querySelector('.tooltip' + id);
|
||
|
||
this.$nextTick(() => {
|
||
// this.hovered = false;
|
||
title.style.display = 'none';
|
||
});
|
||
}
|
||
},
|
||
//二级鼠标悬浮
|
||
showCardtip(id) {
|
||
// const hover = document.querySelector('.hovered' + id);
|
||
if (id) {
|
||
const title = document.querySelector('.cardTitle1' + id);
|
||
this.$nextTick(() => {
|
||
title.style.position = 'absolute';
|
||
title.style.display = 'block';
|
||
title.style.backgroundColor = '#f7f7f7';
|
||
title.style.border = '1px solid #ccc';
|
||
// title.style.top = '120px';
|
||
title.style.width = '110px';
|
||
});
|
||
}
|
||
},
|
||
//二级鼠标移出
|
||
hideCardtip(id) {
|
||
if (id) {
|
||
const title = document.querySelector('.cardTitle1' + id);
|
||
this.$nextTick(() => {
|
||
// this.hovered = false;
|
||
title.style.display = 'none';
|
||
});
|
||
}
|
||
},
|
||
|
||
//单选按钮选择事件
|
||
changeChat(val, index) {
|
||
console.log('changeChat');
|
||
console.log(val);
|
||
console.log(index);
|
||
this.chatShowType = '';
|
||
this.$nextTick(() => {
|
||
this.chatShowType = val[index - 1].presentationForm;
|
||
// this.chatShowIndex = index;
|
||
let count = index - 1;
|
||
let elements = document.querySelectorAll('[class^="echarts"]');
|
||
// let echarts = document.querySelector('.echarts' + count);
|
||
elements.forEach((element) => {
|
||
this.setZIndex(element, count);
|
||
});
|
||
});
|
||
},
|
||
//显示echarts设置对应的层级
|
||
setZIndex(element, count) {
|
||
if (element.classList.contains(`echarts${count}`)) {
|
||
element.style.zIndex = '9999';
|
||
} else {
|
||
element.style.zIndex = '1';
|
||
}
|
||
},
|
||
//配置弹窗关闭事件
|
||
handleClose(done) {
|
||
done();
|
||
this.getSensorFusionData();
|
||
// this.$confirm("确认关闭？")
|
||
// .then(() => {
|
||
// done();
|
||
// this.getSensorFusionData();
|
||
// })
|
||
// .catch((err) => {
|
||
// //console.log(err);
|
||
// });
|
||
},
|
||
//确认按钮
|
||
addSuccess() {
|
||
this.centerDialogVisible = false;
|
||
// this.getSensorFusionData();
|
||
this.$router.go(0);
|
||
},
|
||
//tab切换事件
|
||
tabChange(val) {
|
||
this.$nextTick(() => {
|
||
this.tabChangeIndex = val.index;
|
||
});
|
||
},
|
||
//通过传入组件id判断他在卡片区还是图表区
|
||
findLocationById(intersectionList, id) {
|
||
let isInCardArea = false;
|
||
let isInChartArea = false;
|
||
// Iterating through the data structure
|
||
for (let item of intersectionList) {
|
||
if (item.children && Array.isArray(item.children)) {
|
||
for (let childItem of item.children) {
|
||
if (childItem.children && Array.isArray(childItem.children)) {
|
||
for (let subChildItem of childItem.children) {
|
||
if (subChildItem.children && Array.isArray(subChildItem.children)) {
|
||
for (let innerChildItem of subChildItem.children) {
|
||
if (innerChildItem.presentationForm == null) {
|
||
for (const fiveChildItem of innerChildItem.children) {
|
||
if (fiveChildItem.analogAreaComponentId === id && subChildItem.name === '卡片区') {
|
||
isInCardArea = true;
|
||
}
|
||
}
|
||
} else {
|
||
if (innerChildItem.analogAreaComponentId === id && subChildItem.name === '图表区') {
|
||
isInChartArea = true;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
if (isInCardArea && isInChartArea) {
|
||
return '两个区都存在';
|
||
} else if (isInCardArea) {
|
||
return '卡片区';
|
||
} else if (isInChartArea) {
|
||
return '图表区';
|
||
} else {
|
||
return '未找到该 ID';
|
||
}
|
||
},
|
||
//mqtt接收数据添加最新的最多添加10条
|
||
addOrUpdateArrayItem(array, newItem) {
|
||
if (array.length === 5) {
|
||
array.shift(); // 删除最旧的元素
|
||
}
|
||
array.push(newItem); // 添加最新的元素
|
||
},
|
||
//mqtt接收到对数据做处理卡片
|
||
updateValueByVideoIdAndCommentId(data, videoId, commentId, newValue, newField, newFieldValue) {
|
||
for (let i = 0; i < data.length; i++) {
|
||
if (data[i].videoId === videoId && data[i].analogAreaComponentId === commentId) {
|
||
// 修改或添加该层级的其他字段
|
||
for (let field in data[i]) {
|
||
if (field !== 'videoId' && field !== 'analogAreaComponentId') {
|
||
data[i].triggerData = newValue;
|
||
}
|
||
}
|
||
// 新增字段并给定新值
|
||
// if (!data[i][newField]) {
|
||
// data[i][newField] = newValue;
|
||
// }
|
||
}
|
||
if (data[i].children && data[i].children.length > 0) {
|
||
this.updateValueByVideoIdAndCommentId(data[i].children, videoId, commentId, newValue, newField, newFieldValue); // 递归调用，继续遍历下一层级的数据
|
||
}
|
||
}
|
||
},
|
||
//mqtt接收到数据给图表添加数据
|
||
upDataListByVideoIdAndCommentId(data, videoId, commentId, newValue, newField, newFieldValue) {
|
||
for (let i = 0; i < data.length; i++) {
|
||
if (data[i].videoId === videoId && data[i].analogAreaComponentId === commentId) {
|
||
// 修改或添加该层级的其他字段
|
||
for (let field in data[i]) {
|
||
if (field !== 'videoId' && field !== 'analogAreaComponentId') {
|
||
data[i].triggerDataList = newValue;
|
||
}
|
||
}
|
||
// 新增字段并给定新值
|
||
// if (!data[i][newField]) {
|
||
// data[i][newField] = newValue;
|
||
// }
|
||
}
|
||
if (data[i].children && data[i].children.length > 0) {
|
||
this.upDataListByVideoIdAndCommentId(data[i].children, videoId, commentId, newValue, newField, newFieldValue); // 递归调用，继续遍历下一层级的数据
|
||
}
|
||
}
|
||
},
|
||
//mqtt接收到数据给图表添加数据(固定时刻)
|
||
upDataListByTimeData(data, videoId, commentId, newValue, newField, newFieldValue) {
|
||
for (let i = 0; i < data.length; i++) {
|
||
if (data[i].videoId === videoId && data[i].analogAreaComponentId === commentId) {
|
||
// 修改或添加该层级的其他字段
|
||
for (let field in data[i]) {
|
||
if (field !== 'videoId' && field !== 'analogAreaComponentId') {
|
||
data[i].cycleTimeData = newValue;
|
||
}
|
||
}
|
||
// 新增字段并给定新值
|
||
// if (!data[i][newField]) {
|
||
// data[i][newField] = newValue;
|
||
// }
|
||
}
|
||
if (data[i].children && data[i].children.length > 0) {
|
||
this.upDataListByTimeData(data[i].children, videoId, commentId, newValue, newField, newFieldValue); // 递归调用，继续遍历下一层级的数据
|
||
}
|
||
}
|
||
},
|
||
//实时触发表格添加数据
|
||
triggerDataCharts(data, videoId, analogAreaComponentId, newValue, time, table) {
|
||
for (let i = 0; i < data.length; i++) {
|
||
for (let j = 0; j < data[i].children.length; j++) {
|
||
for (let n = 0; n < data[i].children[j].children.length; n++) {
|
||
if (data[i].children[j].children[n].name == '图表区') {
|
||
for (let m = 0; m < data[i].children[j].children[n].children.length; m++) {
|
||
if (
|
||
data[i].children[j].children[n].children[m].videoId == videoId &&
|
||
data[i].children[j].children[n].children[m].analogAreaComponentId == analogAreaComponentId
|
||
) {
|
||
if (data[i].children[j].children[n].children[m].componentType == '类型') {
|
||
let typeData = {
|
||
name: table.name,
|
||
time: time,
|
||
type: table.type,
|
||
n_stay: table.n_stay,
|
||
n_queue: table.n_queue,
|
||
occ: table.occ,
|
||
speed: table.speed,
|
||
type_data: newValue,
|
||
originalSpeed: table.originalSpeed
|
||
};
|
||
if (!data[i].children[j].children[n].children[m].triggerDataList) {
|
||
data[i].children[j].children[n].children[m].triggerDataList = [];
|
||
}
|
||
this.addTimeDataCharts(data[i].children[j].children[n].children[m].triggerDataList, typeData);
|
||
} else {
|
||
if (!data[i].children[j].children[n].children[m].triggerDataList) {
|
||
data[i].children[j].children[n].children[m].triggerDataList = [];
|
||
}
|
||
if (data[i].children[j].children[n].children[m].triggerDataList.length > 10) {
|
||
data[i].children[j].children[n].children[m].triggerDataList =
|
||
data[i].children[j].children[n].children[m].triggerDataList.slice(-10);
|
||
}
|
||
this.addTimeDataCharts(data[i].children[j].children[n].children[m].triggerDataList, newValue);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
//固定时刻图表添加数据
|
||
timeDataCharts(data, videoId, analogAreaComponentId, newValue, time, table) {
|
||
for (let i = 0; i < data.length; i++) {
|
||
for (let j = 0; j < data[i].children.length; j++) {
|
||
for (let n = 0; n < data[i].children[j].children.length; n++) {
|
||
if (data[i].children[j].children[n].name == '图表区') {
|
||
for (let m = 0; m < data[i].children[j].children[n].children.length; m++) {
|
||
if (
|
||
data[i].children[j].children[n].children[m].videoId == videoId &&
|
||
data[i].children[j].children[n].children[m].analogAreaComponentId == analogAreaComponentId
|
||
) {
|
||
if (data[i].children[j].children[n].children[m].componentType == '类型') {
|
||
let typeData = {
|
||
name: table.name,
|
||
time: time,
|
||
type: table.type,
|
||
n_stay: table.n_stay,
|
||
n_queue: table.n_queue,
|
||
occ: table.occ,
|
||
speed: table.speed,
|
||
type_data: newValue,
|
||
headway: table.headway,
|
||
avg: table.avg,
|
||
max: table.max,
|
||
med: table.med,
|
||
min: table.min,
|
||
originalSpeed: table.originalSpeed
|
||
};
|
||
if (!data[i].children[j].children[n].children[m].cycleTimeData) {
|
||
data[i].children[j].children[n].children[m].cycleTimeData = [];
|
||
}
|
||
this.addTimeDataCharts(data[i].children[j].children[n].children[m].cycleTimeData, typeData);
|
||
} else {
|
||
if (!data[i].children[j].children[n].children[m].cycleTimeData) {
|
||
data[i].children[j].children[n].children[m].cycleTimeData = [];
|
||
}
|
||
if (data[i].children[j].children[n].children[m].cycleTimeData.length > 10) {
|
||
data[i].children[j].children[n].children[m].cycleTimeData =
|
||
data[i].children[j].children[n].children[m].cycleTimeData.slice(-10);
|
||
}
|
||
this.addTimeDataCharts(data[i].children[j].children[n].children[m].cycleTimeData, newValue);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
//固定间隔添加图表数据
|
||
cycleStatisticsDataCharts(data, videoId, analogAreaComponentId, newValue, time, table) {
|
||
for (let i = 0; i < data.length; i++) {
|
||
for (let j = 0; j < data[i].children.length; j++) {
|
||
for (let n = 0; n < data[i].children[j].children.length; n++) {
|
||
if (data[i].children[j].children[n].name == '图表区') {
|
||
for (let m = 0; m < data[i].children[j].children[n].children.length; m++) {
|
||
if (
|
||
data[i].children[j].children[n].children[m].videoId == videoId &&
|
||
data[i].children[j].children[n].children[m].analogAreaComponentId == analogAreaComponentId
|
||
) {
|
||
if (data[i].children[j].children[n].children[m].componentType == '类型') {
|
||
// let typeData = {
|
||
// time: time,
|
||
// type_data: newValue,
|
||
// speed: table.speed,
|
||
// avg: table.avg,
|
||
// max: table.max,
|
||
// med: table.med,
|
||
// min: table.min,
|
||
// name: table.name,
|
||
// type: table.type,
|
||
// ave_stay: table.ave_stay,
|
||
// ave_queue: table.ave_queue,
|
||
// occ: table.occ,
|
||
// speed: table.speed
|
||
// };
|
||
let typeData = {
|
||
type_data: newValue,
|
||
time: time,
|
||
name: table.name,
|
||
type: table.type,
|
||
in_flow: table.in_flow,
|
||
out_flow: table.out_flow,
|
||
ave_stay: table.ave_stay,
|
||
ave_queue: table.ave_queue,
|
||
ave_occ: table.ave_occ,
|
||
ave_delay: table.ave_delay,
|
||
type_data: table.type_data,
|
||
ave_headway: table.ave_headway,
|
||
avg: table.avg,
|
||
max: table.max,
|
||
med: table.med,
|
||
min: table.min,
|
||
occ: table.occ,
|
||
originalSpeed: table.speed,
|
||
gate_id: table.gate_id,
|
||
interval: table.interval,
|
||
flow: table.flow,
|
||
in_spd: table.in_spd,
|
||
out_spd: table.out_spd
|
||
};
|
||
if (!data[i].children[j].children[n].children[m].cycleStatisticsData) {
|
||
data[i].children[j].children[n].children[m].cycleStatisticsData = [];
|
||
}
|
||
this.addTimeDataCharts(data[i].children[j].children[n].children[m].cycleStatisticsData, typeData);
|
||
} else {
|
||
if (!data[i].children[j].children[n].children[m].cycleStatisticsData) {
|
||
data[i].children[j].children[n].children[m].cycleStatisticsData = [];
|
||
}
|
||
if (data[i].children[j].children[n].children[m].cycleStatisticsData.length > 10) {
|
||
data[i].children[j].children[n].children[m].cycleStatisticsData =
|
||
data[i].children[j].children[n].children[m].cycleStatisticsData.slice(-10);
|
||
}
|
||
this.addTimeDataCharts(data[i].children[j].children[n].children[m].cycleStatisticsData, newValue);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
//mqtt接收数据添加最新的最多添加10条(固定时刻)
|
||
addTimeDataCharts(array, newItem) {
|
||
if (array && array.length === 10) {
|
||
array.pop(); // 删除最旧的元素
|
||
}
|
||
array.unshift(newItem); // 添加最新的元素
|
||
},
|
||
//mqtt订阅
|
||
getMqtt() {
|
||
this.topicSends = [];
|
||
for (let i = 0; i < this.videoList.length; i++) {
|
||
this.topicSends.push(
|
||
'trigger-' + this.videoList[i].videoId,
|
||
'cycle_time-' + this.videoList[i].videoId,
|
||
'cycle_statistics-' + this.videoList[i].videoId,
|
||
'cycle_accumulate-' + this.videoList[i].videoId
|
||
);
|
||
this.topicVideoIdList.push({ videoId: this.videoList[i].videoId });
|
||
}
|
||
// console.log('在sensorFusion融合页面')
|
||
window.PubScribe(this.topicSends, -1, this.realInfo, true, '融合页面');
|
||
},
|
||
//mqtt订阅
|
||
realInfo(topic, message, videoId) {
|
||
let dataList = this.intersectionList;
|
||
// //console.log(topic, message, 'mqtt数据', videoId);
|
||
for (let i = 0; i < this.topicVideoIdList.length; i++) {
|
||
switch (topic) {
|
||
// 接收托片
|
||
case 'trigger-' + this.topicVideoIdList[i].videoId:
|
||
try {
|
||
//console.log("trigger_msgN",message)
|
||
const utf8decoder = new TextDecoder();
|
||
const u8arr = new Uint8Array(message);
|
||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||
var detId = [];
|
||
const msgN = JSON.parse(temp);
|
||
// 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上处理了，数据源不做处理
|
||
let newSpeed = '-';
|
||
if ((msgN[j].speed && msgN[j].speed != -1) || msgN[j].speed === 0) {
|
||
newSpeed = Math.abs(msgN[j].speed);
|
||
}
|
||
// if (locations == '卡片区') {
|
||
if (msgN[j].component_type == '车头时距') {
|
||
// if (locations == '卡片区' || locations == '两个区都存在') {
|
||
|
||
// if(locations == '图表区' || locations == '两个区都存在'){
|
||
// console.log('实时触发trigger-车头时距', msgN[j]);
|
||
//图表区数组
|
||
// this.addOrUpdateArrayItem(this.triggerDataList, {
|
||
// time: msgN[j].time,
|
||
// headway: msgN[j].headway,
|
||
// avg: msgN[j].avg,
|
||
// max: msgN[j].max,
|
||
// med: msgN[j].med,
|
||
// min: msgN[j].min
|
||
// });
|
||
// component_id: "d4633befe6d4415d8b2c16c61992fb27"
|
||
// graphical_id: "706baf89caa44920b6e84b0c46d10a29"
|
||
// video_id: "9bb7a16ddf924a08b3f5d37d71f86dbd"
|
||
// this.$nextTick(() => {
|
||
// this.upDataListByVideoIdAndCommentId(
|
||
// this.intersectionList,
|
||
// this.topicVideoIdList[i].videoId,
|
||
// msgN[j].component_id,
|
||
// this.triggerDataList
|
||
// );
|
||
// });
|
||
//图表区表格数据
|
||
let carTou = {
|
||
headway: msgN[j].headway,
|
||
avg: msgN[j].avg,
|
||
max: msgN[j].max,
|
||
med: msgN[j].med,
|
||
min: msgN[j].min,
|
||
name: msgN[j].name,
|
||
time: msgN[j].time,
|
||
type: msgN[j].type,
|
||
n_stay: msgN[j].n_stay,
|
||
n_queue: msgN[j].n_queue,
|
||
occ: msgN[j].occ,
|
||
speed: newSpeed,
|
||
originalSpeed: msgN[j].speed
|
||
};
|
||
this.$nextTick(() => {
|
||
this.triggerDataCharts(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
carTou
|
||
);
|
||
});
|
||
|
||
//之前错误逻辑，不知道为啥怎么处理
|
||
// this.addOrUpdateArrayItem(this.tableData, {
|
||
// name: msgN[j].name,
|
||
// time: msgN[j].time,
|
||
// type: msgN[j].type,
|
||
// n_stay: msgN[j].n_stay,
|
||
// n_queue: msgN[j].n_queue,
|
||
// occ: msgN[j].occ,
|
||
// speed: newSpeed,
|
||
// originalSpeed: msgN[j].speed
|
||
// });
|
||
// }
|
||
//卡片区
|
||
let map = {
|
||
time: msgN[j].time,
|
||
headway: msgN[j].headway
|
||
};
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
map
|
||
);
|
||
});
|
||
} else if (msgN[j].component_type == '流量') {
|
||
// console.log('实时触发trigger-流量', msgN[j]);
|
||
//图表区
|
||
// this.addOrUpdateArrayItem(this.triggerFlowData, {
|
||
// time: msgN[j].time,
|
||
// in_flow: msgN[j].in_flow,
|
||
// out_flow: msgN[j].out_flow
|
||
// });
|
||
// this.$nextTick(() => {
|
||
// this.upDataListByVideoIdAndCommentId(
|
||
// this.intersectionList,
|
||
// this.topicVideoIdList[i].videoId,
|
||
// msgN[j].component_id,
|
||
// this.triggerFlowData
|
||
// );
|
||
// });
|
||
//卡片区
|
||
let flowMap = {
|
||
inFlow: msgN[j].in_flow,
|
||
outFlow: msgN[j].out_flow,
|
||
time: msgN[j].time
|
||
};
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
flowMap
|
||
);
|
||
});
|
||
//表格数据
|
||
let carTou = {
|
||
in_flow: msgN[j].in_flow,
|
||
out_flow: msgN[j].out_flow,
|
||
name: msgN[j].name,
|
||
time: msgN[j].time,
|
||
type: msgN[j].type,
|
||
n_stay: msgN[j].n_stay,
|
||
n_queue: msgN[j].n_queue,
|
||
occ: msgN[j].occ,
|
||
speed: newSpeed,
|
||
originalSpeed: msgN[j].speed
|
||
};
|
||
this.$nextTick(() => {
|
||
this.triggerDataCharts(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
carTou
|
||
);
|
||
});
|
||
//之前错误逻辑，不知道为啥怎么处理
|
||
// this.addOrUpdateArrayItem(this.tableData, {
|
||
// name: msgN[j].name,
|
||
// time: msgN[j].time,
|
||
// type: msgN[j].type,
|
||
// n_stay: msgN[j].n_stay,
|
||
// n_queue: msgN[j].n_queue,
|
||
// occ: msgN[j].occ,
|
||
// speed: newSpeed,
|
||
// 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,
|
||
time: msgN[j].time
|
||
};
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
map
|
||
);
|
||
});
|
||
//图表区
|
||
// this.addOrUpdateArrayItem(this.triggerSpeedData, {
|
||
// time: msgN[j].time,
|
||
// speed: newSpeed,
|
||
// originalSpeed: msgN[j].speed,
|
||
// avg: msgN[j].avg,
|
||
// max: msgN[j].max,
|
||
// med: msgN[j].med,
|
||
// min: msgN[j].min
|
||
// });
|
||
// this.$nextTick(() => {
|
||
// this.upDataListByVideoIdAndCommentId(
|
||
// this.intersectionList,
|
||
// this.topicVideoIdList[i].videoId,
|
||
// msgN[j].component_id,
|
||
// this.triggerSpeedData
|
||
// );
|
||
// });
|
||
//表格数据
|
||
let carTou = {
|
||
avg: msgN[j].avg,
|
||
max: msgN[j].max,
|
||
med: msgN[j].med,
|
||
min: msgN[j].min,
|
||
name: msgN[j].name,
|
||
time: msgN[j].time,
|
||
type: msgN[j].type,
|
||
n_stay: msgN[j].n_stay,
|
||
n_queue: msgN[j].n_queue,
|
||
occ: msgN[j].occ,
|
||
speed: newSpeed,
|
||
originalSpeed: msgN[j].speed
|
||
};
|
||
this.$nextTick(() => {
|
||
this.triggerDataCharts(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
carTou
|
||
);
|
||
});
|
||
//之前错误逻辑，不知道为啥怎么处理
|
||
// this.addOrUpdateArrayItem(this.tableData, {
|
||
// name: msgN[j].name,
|
||
// time: msgN[j].time,
|
||
// type: msgN[j].type,
|
||
// n_stay: msgN[j].n_stay,
|
||
// n_queue: msgN[j].n_queue,
|
||
// occ: msgN[j].occ,
|
||
// speed: newSpeed,
|
||
// originalSpeed: msgN[j].speed
|
||
// });
|
||
} else if (msgN[j].component_type == '类型') {
|
||
//console.log('实时触发-类型-', msgN[j].type_data);
|
||
let map = {
|
||
type_data: msgN[j].type_data,
|
||
time: msgN[j].time
|
||
};
|
||
//卡片区
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
map
|
||
);
|
||
});
|
||
//图表区
|
||
// this.triggerTypeData = msgN[j].type_data;
|
||
// this.triggerTypeData = [
|
||
// {
|
||
// type_data: msgN[j].type_data,
|
||
// time: msgN[j].time
|
||
// }
|
||
// ];
|
||
// this.addOrUpdateArrayItem(this.triggerTypeData, {
|
||
// type_data: msgN[j].type_data,
|
||
// time: msgN[j].time,
|
||
// });
|
||
// this.$nextTick(() => {
|
||
// this.upDataListByVideoIdAndCommentId(
|
||
// this.intersectionList,
|
||
// this.topicVideoIdList[i].videoId,
|
||
// msgN[j].component_id,
|
||
// this.triggerTypeData
|
||
// );
|
||
// });
|
||
//表格数据 类型有点特殊需要重新比对
|
||
let carTou = {
|
||
name: msgN[j].name,
|
||
time: msgN[j].time,
|
||
type: msgN[j].type,
|
||
n_stay: msgN[j].n_stay,
|
||
n_queue: msgN[j].n_queue,
|
||
occ: msgN[j].occ,
|
||
speed: newSpeed,
|
||
originalSpeed: msgN[j].speed,
|
||
type_data: msgN[j].type_data
|
||
};
|
||
this.$nextTick(() => {
|
||
this.triggerDataCharts(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
msgN[j].type_data,
|
||
msgN[j].time,
|
||
carTou
|
||
);
|
||
});
|
||
//之前错误逻辑，不知道为啥怎么处理
|
||
// this.addOrUpdateArrayItem(this.tableData, {
|
||
// name: msgN[j].name,
|
||
// time: msgN[j].time,
|
||
// type: msgN[j].type,
|
||
// n_stay: msgN[j].n_stay,
|
||
// n_queue: msgN[j].n_queue,
|
||
// occ: msgN[j].occ,
|
||
// speed: newSpeed,
|
||
// originalSpeed: msgN[j].speed
|
||
// });
|
||
} else if (msgN[j].component_type == '检测数') {
|
||
let map = {
|
||
n_stay: msgN[j].n_stay,
|
||
time: msgN[j].time
|
||
};
|
||
//卡片区
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
map
|
||
);
|
||
});
|
||
//图表区
|
||
// this.addOrUpdateArrayItem(this.triggerNStayData, {
|
||
// time: msgN[j].time,
|
||
// n_stay: msgN[j].n_stay,
|
||
// avg: msgN[j].avg,
|
||
// max: msgN[j].max,
|
||
// med: msgN[j].med,
|
||
// min: msgN[j].min
|
||
// });
|
||
// this.$nextTick(() => {
|
||
// this.upDataListByVideoIdAndCommentId(
|
||
// this.intersectionList,
|
||
// this.topicVideoIdList[i].videoId,
|
||
// msgN[j].component_id,
|
||
// this.triggerNStayData
|
||
// );
|
||
// });
|
||
//表格数据
|
||
let carTou = {
|
||
avg: msgN[j].avg,
|
||
max: msgN[j].max,
|
||
med: msgN[j].med,
|
||
min: msgN[j].min,
|
||
name: msgN[j].name,
|
||
time: msgN[j].time,
|
||
type: msgN[j].type,
|
||
n_stay: msgN[j].n_stay,
|
||
n_queue: msgN[j].n_queue,
|
||
occ: msgN[j].occ,
|
||
speed: newSpeed,
|
||
originalSpeed: msgN[j].speed
|
||
};
|
||
this.$nextTick(() => {
|
||
this.triggerDataCharts(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
carTou
|
||
);
|
||
});
|
||
//之前错误逻辑，不知道为啥怎么处理
|
||
// this.addOrUpdateArrayItem(this.tableData, {
|
||
// name: msgN[j].name,
|
||
// time: msgN[j].time,
|
||
// type: msgN[j].type,
|
||
// n_stay: msgN[j].n_stay,
|
||
// n_queue: msgN[j].n_queue,
|
||
// occ: msgN[j].occ,
|
||
// speed: newSpeed,
|
||
// originalSpeed: msgN[j].speed
|
||
// });
|
||
} else if (msgN[j].component_type == '排队数') {
|
||
let map = {
|
||
n_queue: msgN[j].n_queue,
|
||
time: msgN[j].time
|
||
};
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
map
|
||
);
|
||
});
|
||
//图表区
|
||
// this.addOrUpdateArrayItem(this.triggerNQueueData, {
|
||
// time: msgN[j].time,
|
||
// n_queue: msgN[j].n_queue
|
||
// });
|
||
// this.$nextTick(() => {
|
||
// this.upDataListByVideoIdAndCommentId(
|
||
// this.intersectionList,
|
||
// this.topicVideoIdList[i].videoId,
|
||
// msgN[j].component_id,
|
||
// this.triggerNQueueData
|
||
// );
|
||
// });
|
||
//表格数据
|
||
let carTou = {
|
||
name: msgN[j].name,
|
||
time: msgN[j].time,
|
||
type: msgN[j].type,
|
||
n_stay: msgN[j].n_stay,
|
||
n_queue: msgN[j].n_queue,
|
||
occ: msgN[j].occ,
|
||
speed: newSpeed,
|
||
originalSpeed: msgN[j].speed
|
||
};
|
||
this.$nextTick(() => {
|
||
this.triggerDataCharts(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
carTou
|
||
);
|
||
});
|
||
//之前错误逻辑，不知道为啥怎么处理
|
||
// this.addOrUpdateArrayItem(this.tableData, {
|
||
// name: msgN[j].name,
|
||
// time: msgN[j].time,
|
||
// type: msgN[j].type,
|
||
// n_stay: msgN[j].n_stay,
|
||
// n_queue: msgN[j].n_queue,
|
||
// occ: msgN[j].occ,
|
||
// speed: newSpeed,
|
||
// originalSpeed: msgN[j].speed
|
||
// });
|
||
} else if (msgN[j].component_type == 'OD') {
|
||
//图表区 - TODO 估计有未知问题
|
||
// this.addOrUpdateArrayItem(this.triggerODData, {
|
||
// ob_data: msgN[j].ob_data
|
||
// });
|
||
// this.$nextTick(() => {
|
||
// this.upDataListByVideoIdAndCommentId(
|
||
// this.intersectionList,
|
||
// this.topicVideoIdList[i].videoId,
|
||
// msgN[j].component_id,
|
||
// this.triggerODData
|
||
// );
|
||
// });
|
||
let carTou = {
|
||
ob_data: msgN[j].ob_data
|
||
};
|
||
this.$nextTick(() => {
|
||
this.triggerDataCharts(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
carTou
|
||
);
|
||
});
|
||
}
|
||
}
|
||
} catch (error) {}
|
||
break;
|
||
case 'cycle_time-' + this.topicVideoIdList[i].videoId:
|
||
try {
|
||
// //console.log("trigger_msgN",message)
|
||
const utf8decoder = new TextDecoder();
|
||
const u8arr = new Uint8Array(message);
|
||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||
const msgN = JSON.parse(temp);
|
||
// console.log('固定时刻', msgN);
|
||
for (let j = 0; j < msgN.length; j++) {
|
||
const locations = this.findLocationById(this.intersectionList, msgN[j].component_id);
|
||
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
|
||
let newSpeed = '-';
|
||
if ((msgN[j].speed && msgN[j].speed != -1) || msgN[j].speed === 0) {
|
||
newSpeed = Math.abs(msgN[j].speed);
|
||
}
|
||
if (msgN[j].component_type == '车头时距') {
|
||
//图表区数组加表格数据
|
||
let carTou = {
|
||
name: msgN[j].name,
|
||
time: msgN[j].time,
|
||
type: msgN[j].type,
|
||
n_stay: msgN[j].n_stay,
|
||
n_queue: msgN[j].n_queue,
|
||
occ: msgN[j].occ,
|
||
speed: newSpeed,
|
||
headway: msgN[j].headway,
|
||
avg: msgN[j].avg,
|
||
max: msgN[j].max,
|
||
med: msgN[j].med,
|
||
min: msgN[j].min,
|
||
originalSpeed: msgN[j].speed
|
||
};
|
||
this.$nextTick(() => {
|
||
this.timeDataCharts(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
carTou
|
||
);
|
||
});
|
||
//卡片区
|
||
let map = {
|
||
headway: msgN[j].headway,
|
||
time: msgN[j].time
|
||
};
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
map
|
||
);
|
||
//console.log(this.intersectionList, 'this.intersectionList');
|
||
});
|
||
} else if (msgN[j].component_type == '速度') {
|
||
//卡片区
|
||
let map = {
|
||
speed: msgN[j].speed,
|
||
time: msgN[j].time
|
||
};
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
map
|
||
);
|
||
});
|
||
//图表区
|
||
let speedMap = {
|
||
name: msgN[j].name,
|
||
time: msgN[j].time,
|
||
type: msgN[j].type,
|
||
n_stay: msgN[j].n_stay,
|
||
n_queue: msgN[j].n_queue,
|
||
occ: msgN[j].occ,
|
||
speed: newSpeed,
|
||
headway: msgN[j].headway,
|
||
avg: msgN[j].avg,
|
||
max: msgN[j].max,
|
||
med: msgN[j].med,
|
||
min: msgN[j].min,
|
||
originalSpeed: msgN[j].speed
|
||
};
|
||
this.$nextTick(() => {
|
||
this.timeDataCharts(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
speedMap
|
||
);
|
||
});
|
||
} else if (msgN[j].component_type == '类型') {
|
||
//卡片区
|
||
let map = {
|
||
type_data: msgN[j].type_data,
|
||
time: msgN[j].time
|
||
};
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
map
|
||
);
|
||
});
|
||
//图表区
|
||
let table = {
|
||
name: msgN[j].name,
|
||
time: msgN[j].time,
|
||
type: msgN[j].type,
|
||
n_stay: msgN[j].n_stay,
|
||
n_queue: msgN[j].n_queue,
|
||
occ: msgN[j].occ,
|
||
speed: newSpeed,
|
||
type_data: msgN[j].type_data,
|
||
headway: msgN[j].headway,
|
||
avg: msgN[j].avg,
|
||
max: msgN[j].max,
|
||
med: msgN[j].med,
|
||
min: msgN[j].min,
|
||
originalSpeed: msgN[j].speed
|
||
};
|
||
this.$nextTick(() => {
|
||
this.timeDataCharts(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
msgN[j].type_data,
|
||
msgN[j].time,
|
||
table
|
||
);
|
||
});
|
||
} else if (msgN[j].component_type == 'OD') {
|
||
//图表区
|
||
// this.addOrUpdateArrayItem(this.triggerODData, {
|
||
// ob_data: msgN[j].ob_data
|
||
// });
|
||
let table = {
|
||
ob_data: msgN[j].ob_data
|
||
};
|
||
this.$nextTick(() => {
|
||
this.timeDataCharts(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
table
|
||
);
|
||
});
|
||
}
|
||
}
|
||
} catch (error) {}
|
||
break;
|
||
case 'cycle_statistics-' + this.topicVideoIdList[i].videoId:
|
||
try {
|
||
// //console.log("trigger_msgN",message)
|
||
const utf8decoder = new TextDecoder();
|
||
const u8arr = new Uint8Array(message);
|
||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||
var detId = [];
|
||
const msgN = JSON.parse(temp);
|
||
//console.log('固定间隔', msgN, this.topicVideoIdList[i].videoId);
|
||
// this.cycleStatisticsData = msgN;
|
||
// console.log('固定间隔', msgN);
|
||
for (let j = 0; j < msgN.length; j++) {
|
||
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
|
||
let newSpeed = '-',
|
||
aveHeadway = msgN[j].ave_headway;
|
||
if ((msgN[j].speed && msgN[j].speed != -1) || msgN[j].speed === 0) {
|
||
newSpeed = Math.abs(msgN[j].speed);
|
||
}
|
||
if (msgN[j].ave_headway == -1) {
|
||
aveHeadway = '-';
|
||
}
|
||
if (msgN[j].component_type == '车头时距') {
|
||
// console.log('固定间隔-车头时距', sgN[j]);
|
||
//图表区数组加表格数据
|
||
let carTou = {
|
||
name: msgN[j].name,
|
||
time: msgN[j].time,
|
||
type: msgN[j].type,
|
||
in_flow: msgN[j].in_flow,
|
||
out_flow: msgN[j].out_flow,
|
||
ave_stay: msgN[j].ave_stay,
|
||
ave_queue: msgN[j].ave_queue,
|
||
ave_occ: msgN[j].ave_occ,
|
||
ave_delay: msgN[j].ave_delay,
|
||
speed: newSpeed,
|
||
ave_headway: aveHeadway,
|
||
avg: msgN[j].avg,
|
||
max: msgN[j].max,
|
||
med: msgN[j].med,
|
||
min: msgN[j].min,
|
||
occ: msgN[j].occ,
|
||
originalSpeed: msgN[j].speed,
|
||
gate_id: msgN[j].gate_id,
|
||
interval: msgN[j].interval,
|
||
flow: msgN[j].flow,
|
||
in_spd: msgN[j].in_spd,
|
||
out_spd: msgN[j].out_spd
|
||
};
|
||
this.$nextTick(() => {
|
||
this.cycleStatisticsDataCharts(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
carTou
|
||
);
|
||
});
|
||
//卡片区
|
||
let map = {
|
||
ave_headway: aveHeadway,
|
||
time: msgN[j].time
|
||
};
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
map
|
||
);
|
||
});
|
||
} else if (msgN[j].component_type == '速度') {
|
||
// console.log('固定间隔-速度', msgN[j].speed)
|
||
//卡片区
|
||
let map = {
|
||
speed: msgN[j].speed,
|
||
time: msgN[j].time
|
||
};
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
map
|
||
);
|
||
});
|
||
//图表区
|
||
let speedMap = {
|
||
name: msgN[j].name,
|
||
time: msgN[j].time,
|
||
type: msgN[j].type,
|
||
in_flow: msgN[j].in_flow,
|
||
out_flow: msgN[j].out_flow,
|
||
ave_stay: msgN[j].ave_stay,
|
||
ave_queue: msgN[j].ave_queue,
|
||
ave_occ: msgN[j].ave_occ,
|
||
ave_delay: msgN[j].ave_delay,
|
||
speed: newSpeed,
|
||
ave_headway: aveHeadway,
|
||
avg: msgN[j].avg,
|
||
max: msgN[j].max,
|
||
med: msgN[j].med,
|
||
min: msgN[j].min,
|
||
occ: msgN[j].occ,
|
||
originalSpeed: msgN[j].speed,
|
||
gate_id: msgN[j].gate_id,
|
||
interval: msgN[j].interval,
|
||
flow: msgN[j].flow,
|
||
in_spd: msgN[j].in_spd,
|
||
out_spd: msgN[j].out_spd
|
||
};
|
||
this.$nextTick(() => {
|
||
this.cycleStatisticsDataCharts(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
speedMap
|
||
);
|
||
});
|
||
} else if (msgN[j].component_type == '类型') {
|
||
// console.log('固定间隔-类型', JSON.stringify(msgN[j].type_data))
|
||
// console.log('固定间隔-类型', JSON.stringify(msgN[j].time))
|
||
//卡片区
|
||
let map = {
|
||
type_data: msgN[j].type_data,
|
||
time: msgN[j].time
|
||
};
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
map
|
||
);
|
||
});
|
||
//图表区
|
||
let table = {
|
||
name: msgN[j].name,
|
||
time: msgN[j].time,
|
||
type: msgN[j].type,
|
||
in_flow: msgN[j].in_flow,
|
||
out_flow: msgN[j].out_flow,
|
||
ave_stay: msgN[j].ave_stay,
|
||
ave_queue: msgN[j].ave_queue,
|
||
ave_occ: msgN[j].ave_occ,
|
||
ave_delay: msgN[j].ave_delay,
|
||
speed: newSpeed,
|
||
type_data: msgN[j].type_data,
|
||
ave_headway: aveHeadway,
|
||
avg: msgN[j].avg,
|
||
max: msgN[j].max,
|
||
med: msgN[j].med,
|
||
min: msgN[j].min,
|
||
occ: msgN[j].occ,
|
||
originalSpeed: msgN[j].speed,
|
||
gate_id: msgN[j].gate_id,
|
||
interval: msgN[j].interval,
|
||
flow: msgN[j].flow,
|
||
in_spd: msgN[j].in_spd,
|
||
out_spd: msgN[j].out_spd
|
||
};
|
||
this.$nextTick(() => {
|
||
this.cycleStatisticsDataCharts(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
msgN[j].type_data,
|
||
msgN[j].time,
|
||
table
|
||
);
|
||
});
|
||
} else if (msgN[j].component_type == '流量') {
|
||
//卡片区
|
||
let flowMap = {
|
||
inFlow: msgN[j].in_flow,
|
||
outFlow: msgN[j].out_flow,
|
||
time: msgN[j].time
|
||
};
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
flowMap
|
||
);
|
||
});
|
||
//图表区
|
||
let table = {
|
||
name: msgN[j].name,
|
||
time: msgN[j].time,
|
||
type: msgN[j].type,
|
||
in_flow: msgN[j].in_flow,
|
||
out_flow: msgN[j].out_flow,
|
||
ave_stay: msgN[j].ave_stay,
|
||
ave_queue: msgN[j].ave_queue,
|
||
ave_occ: msgN[j].ave_occ,
|
||
ave_delay: msgN[j].ave_delay,
|
||
speed: newSpeed,
|
||
ave_headway: aveHeadway,
|
||
avg: msgN[j].avg,
|
||
max: msgN[j].max,
|
||
med: msgN[j].med,
|
||
min: msgN[j].min,
|
||
occ: msgN[j].occ,
|
||
originalSpeed: msgN[j].speed,
|
||
gate_id: msgN[j].gate_id,
|
||
interval: msgN[j].interval,
|
||
flow: msgN[j].flow,
|
||
in_spd: msgN[j].in_spd,
|
||
out_spd: msgN[j].out_spd
|
||
};
|
||
this.$nextTick(() => {
|
||
this.cycleStatisticsDataCharts(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
table
|
||
);
|
||
});
|
||
} else if (msgN[j].component_type == '检测数') {
|
||
let map = {
|
||
ave_stay: msgN[j].ave_stay,
|
||
time: msgN[j].time
|
||
};
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
map
|
||
);
|
||
});
|
||
//图表
|
||
let table = {
|
||
name: msgN[j].name,
|
||
time: msgN[j].time,
|
||
type: msgN[j].type,
|
||
in_flow: msgN[j].in_flow,
|
||
out_flow: msgN[j].out_flow,
|
||
ave_stay: msgN[j].ave_stay,
|
||
ave_queue: msgN[j].ave_queue,
|
||
ave_occ: msgN[j].ave_occ,
|
||
ave_delay: msgN[j].ave_delay,
|
||
speed: newSpeed,
|
||
ave_headway: aveHeadway,
|
||
avg: msgN[j].avg,
|
||
max: msgN[j].max,
|
||
med: msgN[j].med,
|
||
min: msgN[j].min,
|
||
occ: msgN[j].occ,
|
||
originalSpeed: msgN[j].speed,
|
||
gate_id: msgN[j].gate_id,
|
||
interval: msgN[j].interval,
|
||
flow: msgN[j].flow,
|
||
in_spd: msgN[j].in_spd,
|
||
out_spd: msgN[j].out_spd
|
||
};
|
||
this.$nextTick(() => {
|
||
this.cycleStatisticsDataCharts(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
table
|
||
);
|
||
});
|
||
} else if (msgN[j].component_type == '排队数') {
|
||
let map = {
|
||
ave_queue: msgN[j].ave_queue,
|
||
time: msgN[j].time
|
||
};
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
map
|
||
);
|
||
});
|
||
//图表
|
||
let table = {
|
||
name: msgN[j].name,
|
||
time: msgN[j].time,
|
||
type: msgN[j].type,
|
||
in_flow: msgN[j].in_flow,
|
||
out_flow: msgN[j].out_flow,
|
||
ave_stay: msgN[j].ave_stay,
|
||
ave_queue: msgN[j].ave_queue,
|
||
ave_occ: msgN[j].ave_occ,
|
||
ave_delay: msgN[j].ave_delay,
|
||
speed: newSpeed,
|
||
ave_headway: aveHeadway,
|
||
avg: msgN[j].avg,
|
||
max: msgN[j].max,
|
||
med: msgN[j].med,
|
||
min: msgN[j].min,
|
||
occ: msgN[j].occ,
|
||
originalSpeed: msgN[j].speed,
|
||
gate_id: msgN[j].gate_id,
|
||
interval: msgN[j].interval,
|
||
flow: msgN[j].flow,
|
||
in_spd: msgN[j].in_spd,
|
||
out_spd: msgN[j].out_spd
|
||
};
|
||
this.$nextTick(() => {
|
||
this.cycleStatisticsDataCharts(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
table
|
||
);
|
||
});
|
||
} else if (msgN[j].component_type == '延误') {
|
||
// console.log('固定间隔-延误', msgN[j]);
|
||
let map = {
|
||
ave_delay: msgN[j].ave_delay,
|
||
time: msgN[j].time
|
||
};
|
||
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
map
|
||
);
|
||
});
|
||
//图表
|
||
let table = {
|
||
name: msgN[j].name,
|
||
time: msgN[j].time,
|
||
type: msgN[j].type,
|
||
in_flow: msgN[j].in_flow,
|
||
out_flow: msgN[j].out_flow,
|
||
ave_stay: msgN[j].ave_stay,
|
||
ave_queue: msgN[j].ave_queue,
|
||
ave_occ: msgN[j].ave_occ,
|
||
ave_delay: msgN[j].ave_delay,
|
||
speed: newSpeed,
|
||
ave_headway: aveHeadway,
|
||
avg: msgN[j].avg,
|
||
max: msgN[j].max,
|
||
med: msgN[j].med,
|
||
min: msgN[j].min,
|
||
occ: msgN[j].occ,
|
||
originalSpeed: msgN[j].speed,
|
||
gate_id: msgN[j].gate_id,
|
||
interval: msgN[j].interval,
|
||
flow: msgN[j].flow,
|
||
in_spd: msgN[j].in_spd,
|
||
out_spd: msgN[j].out_spd
|
||
};
|
||
this.$nextTick(() => {
|
||
this.cycleStatisticsDataCharts(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
table
|
||
);
|
||
});
|
||
} else if (msgN[j].component_type == 'OD') {
|
||
//图表区
|
||
// this.addOrUpdateArrayItem(this.triggerODData, {
|
||
// ob_data: msgN[j].ob_data
|
||
// });
|
||
// console.log('固定间隔-OD', JSON.stringify(msgN[j]));
|
||
let table = {
|
||
ob_data: msgN[j].ob_data
|
||
};
|
||
this.$nextTick(() => {
|
||
this.cycleStatisticsDataCharts(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
table
|
||
);
|
||
});
|
||
}
|
||
}
|
||
} catch (error) {}
|
||
break;
|
||
case 'cycle_accumulate-' + this.topicVideoIdList[i].videoId:
|
||
try {
|
||
// //console.log("trigger_msgN",message)
|
||
const utf8decoder = new TextDecoder();
|
||
const u8arr = new Uint8Array(message);
|
||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||
var detId = [];
|
||
const msgN = JSON.parse(temp);
|
||
//console.log('周期', msgN, this.topicVideoIdList[i].videoId);
|
||
// this.cycleStatisticsData = msgN;
|
||
for (let j = 0; j < msgN.length; j++) {
|
||
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
|
||
let newSpeed = '-',
|
||
aveHeadway = msgN[j].ave_headway;
|
||
if ((msgN[j].speed && msgN[j].speed != -1) || msgN[j].speed === 0) {
|
||
newSpeed = Math.abs(msgN[j].speed);
|
||
}
|
||
if (msgN[j].ave_headway == -1) {
|
||
aveHeadway = '-';
|
||
}
|
||
if (msgN[j].component_type == '车头时距') {
|
||
//卡片区
|
||
let map = {
|
||
ave_headway: aveHeadway,
|
||
time: msgN[j].time
|
||
};
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
map
|
||
);
|
||
});
|
||
} else if (msgN[j].component_type == '速度') {
|
||
//卡片区
|
||
let map = {
|
||
speed: msgN[j].speed,
|
||
time: msgN[j].time
|
||
};
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
map
|
||
);
|
||
});
|
||
} else if (msgN[j].component_type == '类型') {
|
||
//卡片区
|
||
let map = {
|
||
type_data: msgN[j].type_data,
|
||
time: msgN[j].time
|
||
};
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
map
|
||
);
|
||
});
|
||
} else if (msgN[j].component_type == '流量') {
|
||
//卡片区
|
||
let flowMap = {
|
||
inFlow: msgN[j].in_flow,
|
||
outFlow: msgN[j].out_flow,
|
||
time: msgN[j].time
|
||
};
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
flowMap
|
||
);
|
||
});
|
||
} else if (msgN[j].component_type == '检测数') {
|
||
let map = {
|
||
ave_stay: msgN[j].ave_stay,
|
||
time: msgN[j].time
|
||
};
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
map
|
||
);
|
||
});
|
||
} else if (msgN[j].component_type == '排队数') {
|
||
let map = {
|
||
ave_queue: msgN[j].ave_queue,
|
||
time: msgN[j].time
|
||
};
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
map
|
||
);
|
||
});
|
||
} else if (msgN[j].component_type == '延误') {
|
||
let map = {
|
||
ave_delay: msgN[j].ave_delay,
|
||
time: msgN[j].time
|
||
};
|
||
|
||
this.$nextTick(() => {
|
||
this.updateValueByVideoIdAndCommentId(
|
||
this.intersectionList,
|
||
this.topicVideoIdList[i].videoId,
|
||
msgN[j].component_id,
|
||
map
|
||
);
|
||
});
|
||
} else if (msgN[j].component_type == 'OD') {
|
||
}
|
||
}
|
||
} catch (error) {}
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
computed: {},
|
||
// watch: {
|
||
// intersectionList: {
|
||
// handler: function (oldValues, newValues) {},
|
||
// }
|
||
// },
|
||
components: {
|
||
chartsLine, //线型
|
||
chartsPie, //饼图
|
||
chartsBar, //柱状图
|
||
MeanValue, //均值图
|
||
thermalOD, //OD
|
||
tableShow,
|
||
regionTable,
|
||
// player
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.content-box {
|
||
.offlineVideo{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
/deep/ .el-collapse-item__header {
|
||
color: rgb(71, 161, 255);
|
||
padding: 0px 1%;
|
||
font-size: 15px;
|
||
margin-left: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
/deep/ .el-collapse-item__arrow {
|
||
color: #303133;
|
||
}
|
||
/deep/ .el-collapse-item__wrap {
|
||
border-top: 2px solid rgba(71, 94, 115, 0.2);
|
||
}
|
||
.cardList {
|
||
position: relative;
|
||
cursor: pointer;
|
||
.type {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0px;
|
||
z-index: 98;
|
||
}
|
||
.name {
|
||
position: absolute;
|
||
left: 7px;
|
||
top: 0px;
|
||
z-index: 99;
|
||
}
|
||
.statusN {
|
||
position: absolute;
|
||
left: 30px;
|
||
top: 0px;
|
||
z-index: 97;
|
||
}
|
||
.statusName {
|
||
position: absolute;
|
||
left: 45px;
|
||
top: 6px;
|
||
z-index: 99;
|
||
color: #eee;
|
||
}
|
||
}
|
||
}
|
||
.videoContent {
|
||
width: 381px;
|
||
height: 214px;
|
||
}
|
||
.footImg {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
margin-bottom: 10px;
|
||
}
|
||
.tabsList {
|
||
/deep/ .el-collapse-item__wrap {
|
||
border-top: none;
|
||
}
|
||
.collapseList {
|
||
/deep/ .el-collapse-item__content {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
}
|
||
}
|
||
}
|
||
.buttonType {
|
||
color: rgb(105, 105, 105);
|
||
font-size: 19px;
|
||
position: relative;
|
||
top: 3.2%;
|
||
left: 97%;
|
||
z-index: 999;
|
||
padding: 0;
|
||
}
|
||
.cardChatPentar0 {
|
||
width: 70%;
|
||
height: 100%;
|
||
.cardArea {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
.intersectionCard {
|
||
width: 350px;
|
||
height: 340px;
|
||
background: rgba(71, 94, 115, 0.1);
|
||
display: flex;
|
||
padding: 0.5%;
|
||
margin-left: 1%;
|
||
box-sizing: border-box;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
align-content: flex-start;
|
||
overflow-y: auto;
|
||
.intersectionCardTitle {
|
||
margin-top: 1%;
|
||
width: 100%;
|
||
height: 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 17px;
|
||
// position: absolute;
|
||
}
|
||
.boxList {
|
||
height: 42%;
|
||
width: 30%;
|
||
margin-left: 2.5%;
|
||
margin-top: 2.5%;
|
||
/deep/ .el-card__header {
|
||
padding: 0;
|
||
}
|
||
|
||
.clearfix {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
/deep/.el-card__body {
|
||
padding: 0;
|
||
.cardContent {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.count {
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: baseline;
|
||
}
|
||
.time {
|
||
font-size: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.cardChatPentar1 {
|
||
width: 30%;
|
||
height: 100%;
|
||
.chantArea {
|
||
width: 100%;
|
||
height: 100%;
|
||
.chartSection {
|
||
width: 440px;
|
||
height: 340px;
|
||
background: rgba(71, 94, 115, 0.1);
|
||
// margin-left: 1%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
.buttonList {
|
||
height: 17%;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
overflow-x: auto;
|
||
// margin-left: 3%;
|
||
box-sizing: border-box;
|
||
padding: 0 3%;
|
||
}
|
||
.echartList {
|
||
width: 100%;
|
||
height: calc(100% - 17%);
|
||
& > div {
|
||
position: absolute;
|
||
width: 440px;
|
||
height: 282px;
|
||
}
|
||
.echarts0 {
|
||
// position: absolute;
|
||
// width: 440px;
|
||
// height: 282px;
|
||
z-index: 999;
|
||
}
|
||
// .echarts1 {
|
||
// position: absolute;
|
||
// width: 440px;
|
||
// height: 282px;
|
||
// }
|
||
// .echarts2 {
|
||
// position: absolute;
|
||
// width: 440px;
|
||
// height: 282px;
|
||
// }
|
||
// .echarts3 {
|
||
// position: absolute;
|
||
// width: 440px;
|
||
// height: 282px;
|
||
// }
|
||
// .echarts4 {
|
||
// position: absolute;
|
||
// width: 440px;
|
||
// height: 282px;
|
||
// }
|
||
// .echarts5 {
|
||
// position: absolute;
|
||
// width: 440px;
|
||
// height: 282px;
|
||
// }
|
||
// .echarts6 {
|
||
// position: absolute;
|
||
// width: 440px;
|
||
// height: 282px;
|
||
// }
|
||
// .echarts7 {
|
||
// position: absolute;
|
||
// width: 440px;
|
||
// height: 282px;
|
||
// }
|
||
// .echarts8 {
|
||
// position: absolute;
|
||
// width: 440px;
|
||
// height: 282px;
|
||
// }
|
||
// .echarts9 {
|
||
// position: absolute;
|
||
// width: 440px;
|
||
// height: 282px;
|
||
// }
|
||
}
|
||
// .echarts {
|
||
// width: 100%;
|
||
// height: calc(100% - 17%);
|
||
// }
|
||
// .echarts1 {
|
||
// width: 100%;
|
||
// height: calc(100% - 17%);
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
/deep/ .custom-tree-node {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 15px;
|
||
padding-right: 8px;
|
||
.btnbox {
|
||
display: flex;
|
||
align-items: center;
|
||
.spanbox {
|
||
width: 25px;
|
||
}
|
||
}
|
||
}
|
||
/deep/ .el-dialog__footer {
|
||
text-align: right !important;
|
||
}
|
||
.dataConfiguration {
|
||
/deep/ .el-dialog__wrapper {
|
||
overflow: hidden;
|
||
}
|
||
/deep/ .el-dialog {
|
||
// overflow: auto;
|
||
height: 85%;
|
||
}
|
||
/deep/ .el-dialog--center .el-dialog__body {
|
||
overflow: auto;
|
||
height: 80%;
|
||
padding-top: 5px;
|
||
}
|
||
::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
/deep/ .el-dialog__header {
|
||
border-bottom: 2px solid rgba(71, 94, 115, 0.2);
|
||
}
|
||
/deep/ .el-tree-node__content {
|
||
margin-top: 5px;
|
||
background: rgba(172, 172, 172, 0.03);
|
||
}
|
||
/deep/ .el-tree-node__content:hover {
|
||
background: rgba(172, 172, 172, 0.03);
|
||
}
|
||
/deep/ .el-tree-node__expand-icon {
|
||
background: url(../../assets/img/tree.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 10px;
|
||
height: 16px;
|
||
color: transparent;
|
||
margin-right: 8px;
|
||
}
|
||
/deep/ .el-tree-node__expand-icon.is-leaf {
|
||
background: transparent;
|
||
width: 12px;
|
||
height: 18px;
|
||
color: transparent;
|
||
margin-right: 8px;
|
||
}
|
||
/deep/ .el-input__inner {
|
||
height: 26px;
|
||
}
|
||
}
|
||
.custom-tree-node {
|
||
height: 26px;
|
||
}
|
||
.containerTitle {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
width: 100%;
|
||
text-overflow: ellipsis;
|
||
padding-left: 3px;
|
||
box-sizing: border-box;
|
||
}
|
||
.containerTitle1 {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
width: 100%;
|
||
text-overflow: ellipsis;
|
||
padding-left: 3px;
|
||
box-sizing: border-box;
|
||
}
|
||
.containerTitle.hovered {
|
||
overflow: visible;
|
||
}
|
||
.containerTitle1.hovered {
|
||
overflow: visible;
|
||
}
|
||
// .tooltip {
|
||
// position: absolute;
|
||
// background-color: #f7f7f7;
|
||
// border: 1px solid #ccc;
|
||
// }
|
||
/deep/ .el-empty {
|
||
padding: 20px 0;
|
||
}
|
||
.titleIcon {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background-color: rgb(50, 151, 255);
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin-right: 8px;
|
||
}
|
||
</style>
|