3799 lines
216 KiB
Vue
3799 lines
216 KiB
Vue
<template>
|
|
<div class="content-box">
|
|
<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
|
|
"
|
|
>
|
|
{{
|
|
i.triggerData.speed > 0 || i.triggerData.speed == 0
|
|
? i.triggerData.speed
|
|
: 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>
|
|
|
|
<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: 14px" 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
|
|
"
|
|
>
|
|
{{
|
|
i.cycleTimeData[0].speed > 0 || i.cycleTimeData[0].speed == 0
|
|
? i.cycleTimeData[0].speed
|
|
: 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
|
|
"
|
|
>
|
|
{{
|
|
i.triggerData.speed > 0 || i.triggerData.speed == 0
|
|
? i.triggerData.speed
|
|
: 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 == '类型' && i.triggerData == null"
|
|
>
|
|
{{
|
|
i.cycleTimeData[0].type_data[0].quantity +
|
|
i.cycleTimeData[0].type_data[1].quantity +
|
|
i.cycleTimeData[0].type_data[2].quantity
|
|
}}
|
|
</span>
|
|
<span
|
|
style="color: rgb(71, 161, 255); font-size: 23px"
|
|
v-if="
|
|
i.componentType == '类型' &&
|
|
i.triggerData != null &&
|
|
i.triggerData.type_data[0].quantity != undefined
|
|
"
|
|
>
|
|
<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
|
|
style="color: rgb(71, 161, 255); font-size: 23px"
|
|
v-else-if="
|
|
i.componentType == '类型' &&
|
|
i.triggerData != null &&
|
|
i.triggerData.type_data[0].quantity == undefined
|
|
"
|
|
>
|
|
<span
|
|
v-if="
|
|
!Number.isNaN(
|
|
Number(
|
|
i.triggerData.type_data[0].value +
|
|
i.triggerData.type_data[1].value +
|
|
i.triggerData.type_data[2].value
|
|
)
|
|
)
|
|
"
|
|
>{{
|
|
i.triggerData.type_data[0].value +
|
|
i.triggerData.type_data[1].value +
|
|
i.triggerData.type_data[2].value
|
|
}}</span
|
|
>
|
|
<span v-else>0</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: 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 == '流量'">辆</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 == '固定间隔'">
|
|
<el-empty
|
|
:image-size="20"
|
|
description="暂无数据"
|
|
v-if="i.cycleStatisticsData == null || i.cycleStatisticsData.length == 0"
|
|
></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.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
|
|
"
|
|
>
|
|
{{
|
|
i.triggerData.speed > 0 || i.triggerData.speed == 0
|
|
? i.triggerData.speed
|
|
: 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 == '类型' && i.triggerData == null"
|
|
>
|
|
{{
|
|
i.cycleStatisticsData[0].type_data[0].quantity +
|
|
i.cycleStatisticsData[0].type_data[1].quantity +
|
|
i.cycleStatisticsData[0].type_data[2].quantity
|
|
}}
|
|
</span>
|
|
<span
|
|
style="color: rgb(71, 161, 255); font-size: 23px"
|
|
v-else-if="
|
|
i.componentType == '类型' &&
|
|
i.triggerData != null &&
|
|
i.triggerData.type_data[0].quantity != undefined
|
|
"
|
|
>
|
|
<!-- {{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>
|
|
</span>
|
|
<span
|
|
style="color: rgb(71, 161, 255); font-size: 23px"
|
|
v-else-if="
|
|
i.componentType == '类型' &&
|
|
i.triggerData != null &&
|
|
i.triggerData.type_data[0].quantity == undefined
|
|
"
|
|
>
|
|
<!-- {{i.triggerData[0].quantity + i.triggerData[1].quantity + i.triggerData[2].quantity}} -->
|
|
<span
|
|
v-if="
|
|
!Number.isNaN(
|
|
Number(
|
|
i.triggerData.type_data[0].value +
|
|
i.triggerData.type_data[1].value +
|
|
i.triggerData.type_data[2].value
|
|
)
|
|
)
|
|
"
|
|
>{{
|
|
i.triggerData.type_data[0].value +
|
|
i.triggerData.type_data[1].value +
|
|
i.triggerData.type_data[2].value
|
|
}}</span
|
|
>
|
|
<span v-else>0</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 == '车头时距'">秒</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 == '流量'">辆</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>
|
|
</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 :label="m + 1" v-for="(n, m) in o.children" :key="m"></el-radio-button>
|
|
</el-radio-group>
|
|
<!--初始化渲染图表-->
|
|
<div class="echartsList">
|
|
<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 == '实时触发'">
|
|
<el-empty
|
|
:image-size="20"
|
|
description="暂无数据"
|
|
v-if="e.triggerDataList == null"
|
|
></el-empty>
|
|
<chartsLine
|
|
:echartsRef="'echartsLine' + e.duocgqrhpzId"
|
|
style="width: 100%; height: 100%"
|
|
:intersectionName="intersectionName"
|
|
:chatShowType="chatShowType"
|
|
:componentType="e.componentType"
|
|
:timeMode="'实时触发'"
|
|
:flowType="e.flowType"
|
|
:dataList="e.triggerDataList"
|
|
ref="chartsLine"
|
|
v-else-if="e.triggerDataList != null"
|
|
/>
|
|
</div>
|
|
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
|
<el-empty
|
|
:image-size="20"
|
|
description="暂无数据"
|
|
v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
|
|
></el-empty>
|
|
<chartsLine
|
|
:echartsRef="'echartsLine' + e.duocgqrhpzId"
|
|
style="width: 100%; height: 100%"
|
|
:intersectionName="intersectionName"
|
|
:chatShowType="chatShowType"
|
|
:timeMode="'固定时刻'"
|
|
:componentType="e.componentType"
|
|
:dataList="e.cycleTimeData"
|
|
:flowType="e.flowType"
|
|
v-else
|
|
/>
|
|
</div>
|
|
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
|
|
<el-empty
|
|
:image-size="20"
|
|
description="暂无数据"
|
|
v-if="e.cycleStatisticsData == null || e.cycleStatisticsData.length == 0"
|
|
></el-empty>
|
|
<chartsLine
|
|
:echartsRef="'echartsLine' + e.duocgqrhpzId"
|
|
style="width: 100%; height: 100%"
|
|
:intersectionName="intersectionName"
|
|
:chatShowType="chatShowType"
|
|
:timeMode="'固定间隔'"
|
|
:componentType="e.componentType"
|
|
:dataList="e.cycleStatisticsData"
|
|
:flowType="e.flowType"
|
|
v-else
|
|
/>
|
|
</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 == '实时触发'">
|
|
<!-- <el-empty :image-size="20"
|
|
description="暂无数据"></el-empty> -->
|
|
<el-table :data="tableData" 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">
|
|
<!-- <template slot-scope="scope">
|
|
<span v-if="scope.row.type == 'Person'">行人</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
|
|
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
|
|
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
|
|
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
|
|
</template> -->
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
|
|
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
|
|
<el-table-column align="center" prop="occ" label="占用状态">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.occ == '1'">占用</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
|
<!-- <el-empty :image-size="20"
|
|
description="暂无数据"
|
|
v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"></el-empty> -->
|
|
<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">
|
|
<!-- <template slot-scope="scope">
|
|
<span v-if="scope.row.type == 'Person'">行人</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
|
|
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
|
|
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
|
|
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
|
|
</template> -->
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
|
|
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
|
|
<el-table-column align="center" prop="occ" label="占用状态">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.occ == '1'">占用</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
|
|
<!-- <el-empty :image-size="20"
|
|
description="暂无数据"
|
|
v-if="e.cycleStatisticsData == null || e.cycleStatisticsData.length == 0"></el-empty> -->
|
|
<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">
|
|
<!-- <template slot-scope="scope">
|
|
<span v-if="scope.row.type == 'Person'">行人</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
|
|
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
|
|
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
|
|
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
|
|
</template> -->
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
|
|
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
|
|
<el-table-column align="center" prop="occ" label="占用状态">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.occ == '1'">占用</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="speed" label="空间平均速度"></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 == '实时触发'">
|
|
<el-empty
|
|
:image-size="20"
|
|
description="暂无数据"
|
|
v-if="e.triggerDataList == null"
|
|
></el-empty>
|
|
<chartsPie
|
|
:echartsRef="'echartsPie' + e.duocgqrhpzId"
|
|
style="width: 100%; height: 100%"
|
|
:chatShowType="chatShowType"
|
|
:dataList="e.triggerDataList"
|
|
:timeMode="'实时触发'"
|
|
:intersectionName="intersectionName"
|
|
v-else-if="e.triggerDataList != null"
|
|
/>
|
|
</div>
|
|
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
|
<el-empty
|
|
:image-size="20"
|
|
description="暂无数据"
|
|
v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
|
|
></el-empty>
|
|
<chartsPie
|
|
:echartsRef="'echartsPie' + e.duocgqrhpzId"
|
|
style="width: 100%; height: 100%"
|
|
:chatShowType="chatShowType"
|
|
:dataList="e.cycleTimeData"
|
|
:timeMode="'固定时刻'"
|
|
:intersectionName="intersectionName"
|
|
v-else
|
|
/>
|
|
</div>
|
|
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
|
|
<el-empty
|
|
:image-size="20"
|
|
description="暂无数据"
|
|
v-if="e.cycleStatisticsData.length == 0 || e.cycleStatisticsData.length == null"
|
|
></el-empty>
|
|
<chartsPie
|
|
:echartsRef="'echartsPie' + e.duocgqrhpzId"
|
|
style="width: 100%; height: 100%"
|
|
:chatShowType="chatShowType"
|
|
:timeMode="'固定间隔'"
|
|
:dataList="e.cycleStatisticsData"
|
|
:intersectionName="intersectionName"
|
|
v-else
|
|
/>
|
|
</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 == '实时触发'">
|
|
<el-empty
|
|
:image-size="20"
|
|
description="暂无数据"
|
|
v-if="e.triggerDataList == null"
|
|
></el-empty>
|
|
<chartsBar
|
|
:echartsRef="'echartsBar' + e.duocgqrhpzId"
|
|
style="width: 100%; height: 90%"
|
|
:chatShowType="chatShowType"
|
|
:timeMode="'实时触发'"
|
|
:intersectionName="intersectionName"
|
|
:dataList="e.triggerDataList"
|
|
v-else-if="e.triggerDataList != null"
|
|
/>
|
|
</div>
|
|
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
|
<el-empty
|
|
:image-size="20"
|
|
description="暂无数据"
|
|
v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
|
|
></el-empty>
|
|
<chartsBar
|
|
:echartsRef="'echartsBar' + e.duocgqrhpzId"
|
|
style="width: 100%; height: 100%"
|
|
:chatShowType="chatShowType"
|
|
:dataList="e.cycleTimeData"
|
|
:timeMode="'固定时刻'"
|
|
:intersectionName="intersectionName"
|
|
v-else
|
|
/>
|
|
</div>
|
|
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
|
|
<el-empty
|
|
:image-size="20"
|
|
description="暂无数据"
|
|
v-if="e.cycleStatisticsData.length == 0 || e.cycleStatisticsData.length == null"
|
|
></el-empty>
|
|
<chartsBar
|
|
:echartsRef="'echartsBar' + e.duocgqrhpzId"
|
|
style="width: 100%; height: 100%"
|
|
:timeMode="'固定间隔'"
|
|
:chatShowType="chatShowType"
|
|
:dataList="e.cycleStatisticsData"
|
|
:intersectionName="intersectionName"
|
|
v-else
|
|
/>
|
|
</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 == '实时触发'">
|
|
<el-empty
|
|
:image-size="20"
|
|
description="暂无数据"
|
|
v-if="e.triggerDataList == null"
|
|
></el-empty>
|
|
<meanValue
|
|
:echartsRef="'meanValue' + e.duocgqrhpzId"
|
|
style="width: 100%; height: 90%"
|
|
:chatShowType="chatShowType"
|
|
:intersectionName="intersectionName"
|
|
:dataList="e.triggerDataList"
|
|
v-else-if="e.triggerDataList != null"
|
|
/>
|
|
</div>
|
|
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
|
<el-empty
|
|
:image-size="20"
|
|
description="暂无数据"
|
|
v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
|
|
></el-empty>
|
|
<meanValue
|
|
:echartsRef="'meanValue' + e.duocgqrhpzId"
|
|
style="width: 100%; height: 100%"
|
|
:chatShowType="chatShowType"
|
|
:dataList="e.cycleTimeData"
|
|
:intersectionName="intersectionName"
|
|
v-else
|
|
/>
|
|
</div>
|
|
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
|
|
<el-empty
|
|
:image-size="20"
|
|
description="暂无数据"
|
|
v-if="e.cycleStatisticsData.length == 0 || e.cycleStatisticsData.length == null"
|
|
></el-empty>
|
|
<meanValue
|
|
:echartsRef="'meanValue' + e.duocgqrhpzId"
|
|
style="width: 100%; height: 100%"
|
|
:chatShowType="chatShowType"
|
|
:dataList="e.cycleStatisticsData"
|
|
:intersectionName="intersectionName"
|
|
v-else
|
|
/>
|
|
</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 == '实时触发'">
|
|
<el-empty
|
|
:image-size="20"
|
|
description="暂无数据"
|
|
v-if="e.triggerDataList == null"
|
|
></el-empty>
|
|
<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-else-if="e.triggerDataList != null"
|
|
/>
|
|
</div>
|
|
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
|
<el-empty
|
|
:image-size="20"
|
|
description="暂无数据"
|
|
v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
|
|
></el-empty>
|
|
<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-else
|
|
/>
|
|
</div>
|
|
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
|
|
<el-empty
|
|
:image-size="20"
|
|
description="暂无数据"
|
|
v-if="e.cycleStatisticsData.length == 0 || e.cycleStatisticsData.length == null"
|
|
></el-empty>
|
|
<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-else
|
|
/>
|
|
</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 }">
|
|
<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>
|
|
|
|
<!-- <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 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 {
|
|
getRealTimeShipjk, //获取实时视频
|
|
getDuocgqrhpz, //获取树形数据
|
|
getChartComponent, //获取图表
|
|
getNumericalComponent, //获取卡片
|
|
addDuocgqrhpz, //添加节点
|
|
deleteDuocgqrhpz, //删除节点
|
|
editDuocgqrhpzSort, //节点拖拽配许
|
|
editDuocgqrhpz, //编辑节点
|
|
getAssembly, // 获取多传感器融合
|
|
getSelectedComponent //获取已选的组件数据接口
|
|
} from '@/api/sensorFusion.js';
|
|
import qs from 'qs';
|
|
export default {
|
|
name: 'sensorFusion',
|
|
data() {
|
|
return {
|
|
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: [],
|
|
intersectionList: [
|
|
// {
|
|
// intersectionLabel: '路口数据分析',
|
|
// intersectionChildList: [
|
|
// {
|
|
// intersectionTitle: '北进口',
|
|
// children: [
|
|
// {
|
|
// name: '卡片区',
|
|
// twoContentList: [
|
|
// {
|
|
// parentTitle: '左转',
|
|
// children: [
|
|
// {
|
|
// childrenTitle: '流量',
|
|
// childrenSmallTitle: '流量',
|
|
// count: 1,
|
|
// time: '2023-08-25 11:26:10'
|
|
// },
|
|
// {
|
|
// childrenTitle: '流量',
|
|
// childrenSmallTitle: '流量',
|
|
// count: 1,
|
|
// time: '2023-08-25 11:26:10'
|
|
// },
|
|
// {
|
|
// childrenTitle: '流量',
|
|
// childrenSmallTitle: '流量',
|
|
// count: 1,
|
|
// time: '2023-08-25 11:26:10'
|
|
// },
|
|
// {
|
|
// childrenTitle: '流量',
|
|
// childrenSmallTitle: '流量',
|
|
// count: 1,
|
|
// time: '2023-08-25 11:26:10'
|
|
// },
|
|
// {
|
|
// childrenTitle: '流量',
|
|
// childrenSmallTitle: '流量',
|
|
// count: 1,
|
|
// time: '2023-08-25 11:26:10'
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// parentTitle: '右转',
|
|
// children: [
|
|
// {
|
|
// childrenTitle: '流量',
|
|
// childrenSmallTitle: '流量',
|
|
// count: 1,
|
|
// time: '2023-08-25 11:26:10'
|
|
// },
|
|
// {
|
|
// childrenTitle: '速度',
|
|
// childrenSmallTitle: '速度',
|
|
// count: 1,
|
|
// time: '2023-08-25 11:26:10'
|
|
// },
|
|
// {
|
|
// childrenTitle: '流量',
|
|
// childrenSmallTitle: '流量',
|
|
// count: 1,
|
|
// time: '2023-08-25 11:26:10'
|
|
// },
|
|
// {
|
|
// childrenTitle: '流量',
|
|
// childrenSmallTitle: '流量',
|
|
// count: 1,
|
|
// time: '2023-08-25 11:26:10'
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// parentTitle: '直行',
|
|
// children: [
|
|
// {
|
|
// childrenTitle: '流量',
|
|
// childrenSmallTitle: '流量',
|
|
// count: 1,
|
|
// time: '2023-08-25 11:26:10'
|
|
// }
|
|
// ]
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// name: '图表区',
|
|
// echartsList: [
|
|
// {
|
|
// echartsType: '线性',
|
|
// name: '视频X82_线性图表'
|
|
// },
|
|
// {
|
|
// echartsType: '线性2',
|
|
// name: '视频X82_表格'
|
|
// },
|
|
// {
|
|
// echartsType: '线性2',
|
|
// name: '视频X82_饼图'
|
|
// }
|
|
// ]
|
|
// }
|
|
// ]
|
|
// }
|
|
// ]
|
|
// }
|
|
],
|
|
tabPosition: '1',
|
|
threeData: [
|
|
// {
|
|
// id: 1,
|
|
// label: '路口数据分析页',
|
|
// showInput: false,
|
|
// children: [
|
|
// {
|
|
// id: 2,
|
|
// label: '北进口',
|
|
// showInput: false,
|
|
// children: [
|
|
// {
|
|
// id: 3,
|
|
// label: '卡片区',
|
|
// children: [
|
|
// {
|
|
// id: 4,
|
|
// label: '左车道',
|
|
// showInput: false,
|
|
// children: [
|
|
// {
|
|
// id: 5,
|
|
// label: '空间组件-指标组件'
|
|
// },
|
|
// {
|
|
// id: 6,
|
|
// label: '空间组件-指标组件'
|
|
// },
|
|
// {
|
|
// id: 7,
|
|
// label: '空间组件-指标组件'
|
|
// },
|
|
// {
|
|
// id: 8,
|
|
// label: '空间组件-指标组件'
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// id: 9,
|
|
// label: '中车道',
|
|
// showInput: false,
|
|
// children: [
|
|
// {
|
|
// id: 10,
|
|
// label: '空间组件-指标组件'
|
|
// },
|
|
// {
|
|
// id: 11,
|
|
// label: '空间组件-指标组件'
|
|
// },
|
|
// {
|
|
// id: 12,
|
|
// label: '空间组件-指标组件'
|
|
// },
|
|
// {
|
|
// id: 13,
|
|
// label: '空间组件-指标组件'
|
|
// }
|
|
// ]
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// id: 14,
|
|
// label: '图表区',
|
|
// children: [
|
|
// {
|
|
// id: 15,
|
|
// label: '流量组件-曲线图'
|
|
// },
|
|
// {
|
|
// id: 16,
|
|
// label: '速度组件-表格'
|
|
// }
|
|
// ]
|
|
// }
|
|
// ]
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// id: 2,
|
|
// label: '路段数据分析页',
|
|
// showInput: false,
|
|
// children: [
|
|
// {
|
|
// id: 3,
|
|
// label: '北进口',
|
|
// showInput: false,
|
|
// children: [
|
|
// {
|
|
// id: 4,
|
|
// label: '卡片区',
|
|
// children: [
|
|
// {
|
|
// id: 5,
|
|
// label: '左车道',
|
|
// showInput: false,
|
|
// children: [
|
|
// {
|
|
// id: 6,
|
|
// label: '空间组件-指标组件'
|
|
// },
|
|
// {
|
|
// id: 7,
|
|
// label: '空间组件-指标组件'
|
|
// },
|
|
// {
|
|
// id: 8,
|
|
// label: '空间组件-指标组件'
|
|
// },
|
|
// {
|
|
// id: 9,
|
|
// label: '空间组件-指标组件'
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// id: 10,
|
|
// label: '中车道',
|
|
// showInput: false,
|
|
// children: [
|
|
// {
|
|
// id: 11,
|
|
// label: '空间组件-指标组件'
|
|
// },
|
|
// {
|
|
// id: 12,
|
|
// label: '空间组件-指标组件'
|
|
// },
|
|
// {
|
|
// id: 13,
|
|
// label: '空间组件-指标组件'
|
|
// },
|
|
// {
|
|
// id: 14,
|
|
// label: '空间组件-指标组件'
|
|
// }
|
|
// ]
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// id: 15,
|
|
// label: '图表区',
|
|
// children: [
|
|
// {
|
|
// id: 16,
|
|
// label: '流量组件-曲线图'
|
|
// },
|
|
// {
|
|
// id: 17,
|
|
// label: '速度组件-表格'
|
|
// }
|
|
// ]
|
|
// }
|
|
// ]
|
|
// }
|
|
// ]
|
|
// }
|
|
],
|
|
defaultProps: {
|
|
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延误
|
|
};
|
|
},
|
|
mounted() {
|
|
//获取视频列表
|
|
this.getRealTimeShipjk();
|
|
//获取多融合数据
|
|
this.getSensorFusionData();
|
|
},
|
|
methods: {
|
|
//获取视频列表接口
|
|
getRealTimeShipjk() {
|
|
getRealTimeShipjk().then((res) => {
|
|
this.videoList = res.data.data;
|
|
});
|
|
},
|
|
//获取多融合传感器融合数据
|
|
getSensorFusionData() {
|
|
getAssembly({
|
|
Number: 10
|
|
}).then((res) => {
|
|
this.intersectionList = res.data.data;
|
|
this.addSelectOptionField(this.intersectionList);
|
|
// this.addTriggerDataField(this.intersectionList);
|
|
//mqtt订阅
|
|
this.getMqtt();
|
|
console.log(this.intersectionList, 'this.intersectionList');
|
|
// for (let i = 0; i < this.intersectionList.length; i++) {
|
|
// for (let j = 0; j < this.intersectionList[i].children.length; j++) {
|
|
// if (j == 2) {
|
|
// this.intersectionName.push(this.intersectionList[i].children[j].name);
|
|
// }
|
|
// }
|
|
// }
|
|
// console.log(this.intersectionName, 'intersectionName');
|
|
});
|
|
},
|
|
//每个都添加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;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
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;
|
|
});
|
|
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 != '数值');
|
|
});
|
|
});
|
|
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;
|
|
}
|
|
getSelectedComponent({
|
|
DuocgqrhpzId: data.duocgqrhpzId
|
|
}).then((res) => {
|
|
res.data.data.forEach((item) => {
|
|
this.checkList.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}`
|
|
// );
|
|
// }
|
|
// });
|
|
// });
|
|
});
|
|
});
|
|
} 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);
|
|
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);
|
|
this.$nextTick(() => {
|
|
// this.hovered = false;
|
|
title.style.display = 'none';
|
|
});
|
|
},
|
|
//二级鼠标悬浮
|
|
showCardtip(id) {
|
|
// const hover = document.querySelector('.hovered' + 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) {
|
|
const title = document.querySelector('.cardTitle1' + id);
|
|
this.$nextTick(() => {
|
|
// this.hovered = false;
|
|
title.style.display = 'none';
|
|
});
|
|
},
|
|
|
|
//单选按钮选择事件
|
|
changeChat(val, 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();
|
|
},
|
|
//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); // 递归调用，继续遍历下一层级的数据
|
|
}
|
|
}
|
|
},
|
|
//固定时刻图表添加数据
|
|
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 = {
|
|
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,
|
|
n_stay: table.n_stay,
|
|
n_queue: table.n_queue,
|
|
occ: table.occ,
|
|
speed: table.speed
|
|
};
|
|
// 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, typeData);
|
|
} else {
|
|
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
|
|
};
|
|
// 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, typeData);
|
|
} else {
|
|
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.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
|
|
);
|
|
this.topicVideoIdList.push({ videoId: this.videoList[i].videoId });
|
|
}
|
|
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(msgN,'msgN');
|
|
for (let j = 0; j < msgN.length; j++) {
|
|
const locations = this.findLocationById(this.intersectionList, msgN[j].component_id);
|
|
// if (locations == '卡片区') {
|
|
if (msgN[j].component_type == '车头时距') {
|
|
// if (locations == '卡片区' || locations == '两个区都存在') {
|
|
|
|
// if(locations == '图表区' || locations == '两个区都存在'){
|
|
//图表区数组
|
|
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
|
|
});
|
|
this.$nextTick(() => {
|
|
this.upDataListByVideoIdAndCommentId(
|
|
this.intersectionList,
|
|
this.topicVideoIdList[i].videoId,
|
|
msgN[j].component_id,
|
|
this.triggerDataList
|
|
);
|
|
});
|
|
//表格数据
|
|
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: 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 == '流量') {
|
|
//图表区
|
|
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
|
|
);
|
|
});
|
|
//表格数据
|
|
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: msgN[j].speed
|
|
});
|
|
} 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
|
|
);
|
|
});
|
|
//图表区
|
|
this.addOrUpdateArrayItem(this.triggerSpeedData, {
|
|
time: msgN[j].time,
|
|
speed: 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
|
|
);
|
|
});
|
|
//表格数据
|
|
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: msgN[j].speed
|
|
});
|
|
} 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
|
|
);
|
|
});
|
|
//图表区
|
|
// 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
|
|
);
|
|
});
|
|
//表格数据
|
|
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: 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
|
|
);
|
|
});
|
|
//表格数据
|
|
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: 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
|
|
);
|
|
});
|
|
//表格数据
|
|
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: msgN[j].speed
|
|
});
|
|
} else if (msgN[j].component_type == 'OD') {
|
|
//图表区
|
|
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
|
|
);
|
|
});
|
|
}
|
|
}
|
|
} 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++) {
|
|
if (msgN[j].component_type == '车头时距') {
|
|
//图表区数组加表格数据
|
|
let carTou = {
|
|
time: msgN[j].time,
|
|
headway: msgN[j].headway,
|
|
avg: msgN[j].avg,
|
|
max: msgN[j].max,
|
|
med: msgN[j].med,
|
|
min: msgN[j].min,
|
|
name: msgN[j].name,
|
|
type: msgN[j].type,
|
|
n_stay: msgN[j].n_stay,
|
|
n_queue: msgN[j].n_queue,
|
|
occ: msgN[j].occ,
|
|
speed: 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 = {
|
|
time: msgN[j].time,
|
|
speed: msgN[j].speed,
|
|
avg: msgN[j].avg,
|
|
max: msgN[j].max,
|
|
med: msgN[j].med,
|
|
min: msgN[j].min,
|
|
name: msgN[j].name,
|
|
type: msgN[j].type,
|
|
n_stay: msgN[j].n_stay,
|
|
n_queue: msgN[j].n_queue,
|
|
occ: msgN[j].occ,
|
|
speed: 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 = {
|
|
time: msgN[j].time,
|
|
speed: msgN[j].speed,
|
|
avg: msgN[j].avg,
|
|
max: msgN[j].max,
|
|
med: msgN[j].med,
|
|
min: msgN[j].min,
|
|
name: msgN[j].name,
|
|
type: msgN[j].type,
|
|
n_stay: msgN[j].n_stay,
|
|
n_queue: msgN[j].n_queue,
|
|
occ: msgN[j].occ,
|
|
speed: 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;
|
|
for (let j = 0; j < msgN.length; j++) {
|
|
if (msgN[j].component_type == '车头时距') {
|
|
//图表区数组加表格数据
|
|
let carTou = {
|
|
time: msgN[j].time,
|
|
headway: msgN[j].ave_headway,
|
|
avg: msgN[j].avg,
|
|
max: msgN[j].max,
|
|
med: msgN[j].med,
|
|
min: msgN[j].min,
|
|
name: msgN[j].name,
|
|
type: msgN[j].type,
|
|
n_stay: msgN[j].ave_stay,
|
|
n_queue: msgN[j].ave_queue,
|
|
occ: msgN[j].occ,
|
|
speed: msgN[j].speed
|
|
};
|
|
this.$nextTick(() => {
|
|
this.cycleStatisticsDataCharts(
|
|
this.intersectionList,
|
|
this.topicVideoIdList[i].videoId,
|
|
msgN[j].component_id,
|
|
carTou
|
|
);
|
|
});
|
|
//卡片区
|
|
let map = {
|
|
ave_headway: msgN[j].ave_headway,
|
|
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
|
|
);
|
|
});
|
|
//图表区
|
|
let speedMap = {
|
|
time: msgN[j].time,
|
|
speed: msgN[j].speed,
|
|
avg: msgN[j].avg,
|
|
max: msgN[j].max,
|
|
med: msgN[j].med,
|
|
min: msgN[j].min,
|
|
name: msgN[j].name,
|
|
type: msgN[j].type,
|
|
ave_stay: msgN[j].ave_stay,
|
|
ave_queue: msgN[j].ave_queue,
|
|
occ: msgN[j].occ,
|
|
speed: msgN[j].speed
|
|
};
|
|
this.$nextTick(() => {
|
|
this.cycleStatisticsDataCharts(
|
|
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 = {
|
|
time: msgN[j].time,
|
|
speed: msgN[j].speed,
|
|
avg: msgN[j].avg,
|
|
max: msgN[j].max,
|
|
med: msgN[j].med,
|
|
min: msgN[j].min,
|
|
name: msgN[j].name,
|
|
type: msgN[j].type,
|
|
ave_stay: msgN[j].ave_stay,
|
|
ave_queue: msgN[j].ave_queue,
|
|
occ: msgN[j].occ,
|
|
speed: msgN[j].speed
|
|
};
|
|
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 = {
|
|
time: msgN[j].time,
|
|
in_flow: msgN[j].in_flow,
|
|
out_flow: msgN[j].out_flow,
|
|
name: msgN[j].name,
|
|
type: msgN[j].type,
|
|
ave_stay: msgN[j].ave_stay,
|
|
ave_queue: msgN[j].ave_queue,
|
|
occ: msgN[j].occ,
|
|
speed: msgN[j].speed
|
|
};
|
|
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 = {
|
|
time: msgN[j].time,
|
|
ave_stay: msgN[j].ave_stay,
|
|
avg: msgN[j].avg,
|
|
max: msgN[j].max,
|
|
med: msgN[j].med,
|
|
min: msgN[j].min,
|
|
name: msgN[j].name,
|
|
type: msgN[j].type,
|
|
ave_stay: msgN[j].ave_stay,
|
|
ave_queue: msgN[j].ave_queue,
|
|
occ: msgN[j].occ,
|
|
speed: msgN[j].speed
|
|
};
|
|
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 = {
|
|
time: msgN[j].time,
|
|
ave_queue: msgN[j].ave_queue,
|
|
name: msgN[j].name,
|
|
type: msgN[j].type,
|
|
ave_stay: msgN[j].ave_stay,
|
|
ave_queue: msgN[j].ave_queue,
|
|
occ: msgN[j].occ,
|
|
speed: msgN[j].speed
|
|
};
|
|
this.$nextTick(() => {
|
|
this.cycleStatisticsDataCharts(
|
|
this.intersectionList,
|
|
this.topicVideoIdList[i].videoId,
|
|
msgN[j].component_id,
|
|
table
|
|
);
|
|
});
|
|
} 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
|
|
);
|
|
});
|
|
//图表
|
|
let table = {
|
|
time: msgN[j].time,
|
|
n_queue: msgN[j].ave_delay,
|
|
name: msgN[j].name,
|
|
type: msgN[j].type,
|
|
ave_stay: msgN[j].ave_stay,
|
|
ave_queue: msgN[j].ave_queue,
|
|
occ: msgN[j].occ,
|
|
speed: msgN[j].speed
|
|
};
|
|
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
|
|
// });
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
computed: {},
|
|
// watch: {
|
|
// intersectionList: {
|
|
// handler: function (oldValues, newValues) {},
|
|
// }
|
|
// },
|
|
components: {
|
|
chartsLine, //线型
|
|
chartsPie, //饼图
|
|
chartsBar, //柱状图
|
|
MeanValue, //均值图
|
|
thermalOD //OD
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.content-box {
|
|
/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;
|
|
.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;
|
|
.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;
|
|
.buttonList {
|
|
height: 17%;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 3%;
|
|
}
|
|
.echartsList {
|
|
width: 100%;
|
|
height: calc(100% - 17%);
|
|
.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;
|
|
}
|
|
}
|
|
// .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>
|