<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
                                                            "
                                                        >
                                                            {{ Math.abs(i.triggerData.speed) }}
                                                        </span>
                                                        <span v-else>-</span>
                                                    </span>
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-if="i.componentType == '车头时距'"
                                                        >{{
                                                            i.triggerData.headway || i.triggerData.headway === 0
                                                                ? i.triggerData.headway == -1
                                                                    ? '-'
                                                                    : i.triggerData.headway
                                                                : '-'
                                                        }}</span
                                                    >
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-if="i.componentType == '流量'"
                                                    >
                                                        <span v-if="i.flowType == '入流'">{{
                                                            i.triggerData.inFlow || i.triggerData.inFlow === 0 ? i.triggerData.inFlow : '-'
                                                        }}</span>
                                                        <span v-if="i.flowType == '出流'">{{
                                                            i.triggerData.outFlow || i.triggerData.outFlow === 0
                                                                ? i.triggerData.outFlow
                                                                : '-'
                                                        }}</span>
                                                    </span>
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-if="i.componentType == '类型'"
                                                    >
                                                        <!-- <span v-if="Number(i.triggerData.type_data[0].quantity)">{{
                                                            i.triggerData.type_data[0].quantity
                                                        }}</span> -->
                                                        <!-- <span v-else>0</span> -->
                                                        <span v-if="i.triggerData && i.triggerData.type_data">{{
                                                            getTotal(i.triggerData.type_data, 'quantity', 'value')
                                                        }}</span>
                                                        <span v-else>-</span>
                                                    </span>

                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-if="i.componentType == '检测数'"
                                                        >{{
                                                            i.triggerData.n_stay || i.triggerData.n_stay === 0 ? i.triggerData.n_stay : '-'
                                                        }}</span
                                                    >
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-if="i.componentType == '排队数'"
                                                        >{{
                                                            i.triggerData.n_queue || i.triggerData.n_queue === 0
                                                                ? i.triggerData.n_queue
                                                                : '-'
                                                        }}</span
                                                    >
                                                    <span style="font-size: 14px" v-if="i.componentType == '车头时距'">秒</span>
                                                    <span style="font-size: 13px" v-if="i.componentType == '速度'">
                                                        <span
                                                            v-if="
                                                                (i.triggerData.speed && i.triggerData.speed != -1) ||
                                                                i.triggerData.speed === 0
                                                            "
                                                        >
                                                            {{ i.triggerData.speed > 0 || i.triggerData.speed === 0 ? 'km/h' : 'pix/s' }}
                                                        </span>
                                                    </span>
                                                    <span style="font-size: 14px" v-if="i.componentType == '类型'">个</span>
                                                    <span style="font-size: 14px" v-if="i.componentType == '流量'">辆</span>
                                                    <span
                                                        style="font-size: 14px"
                                                        v-if="i.componentType == '检测数' || i.componentType == '排队数'"
                                                        >辆</span
                                                    >
                                                </div>
                                                <div class="time">
                                                    <el-empty
                                                        :image-size="20"
                                                        description="暂无数据"
                                                        v-if="i.triggerData == null"
                                                    ></el-empty>
                                                    <span style="text-align: center" v-else>{{ i.triggerData.time }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-if="i.timeMode == '固定时刻'">
                                            <el-empty
                                                :image-size="20"
                                                description="暂无数据"
                                                v-if="i.cycleTimeData.length == 0 || i.cycleTimeData.length == null"
                                            ></el-empty>
                                            <div class="cardContent" v-else>
                                                <div class="count">
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-if="i.componentType == '速度' && i.triggerData == null"
                                                    >
                                                        <span
                                                            v-if="
                                                                (i.cycleTimeData[0].speed && i.cycleTimeData[0].speed != -1) ||
                                                                i.cycleTimeData[0].speed === 0
                                                            "
                                                        >
                                                            {{ Math.abs(i.cycleTimeData[0].speed) }}
                                                        </span>
                                                        <span v-else>-</span>
                                                    </span>
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-if="i.componentType == '速度' && i.triggerData != null"
                                                    >
                                                        <span
                                                            v-if="
                                                                (i.triggerData.speed && i.triggerData.speed != -1) ||
                                                                i.triggerData.speed === 0
                                                            "
                                                        >
                                                            {{ Math.abs(i.triggerData.speed) }}
                                                        </span>
                                                        <span v-else>-</span>
                                                    </span>
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-if="i.componentType == '车头时距' && i.triggerData == null"
                                                        >{{
                                                            i.cycleTimeData[0].headway || i.cycleTimeData[0].headway === 0
                                                                ? i.cycleTimeData[0].headway == -1
                                                                    ? '-'
                                                                    : i.cycleTimeData[0].headway
                                                                : '-'
                                                        }}</span
                                                    >
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-else-if="i.componentType == '车头时距' && i.triggerData != null"
                                                        >{{
                                                            i.triggerData.headway || i.triggerData.headway === 0
                                                                ? i.triggerData.headway == -1
                                                                    ? '-'
                                                                    : i.triggerData.headway
                                                                : '-'
                                                        }}</span
                                                    >
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-if="i.componentType == '流量'"
                                                    >
                                                        <span v-if="i.flowType == '入流'">{{
                                                            i.cycleTimeData[0].in_flow || i.cycleTimeData[0].in_flow === 0
                                                                ? i.cycleTimeData[0].in_flow
                                                                : '-'
                                                        }}</span>
                                                        <span v-if="i.flowType == '出流'">{{
                                                            i.cycleTimeData[0].out_flow || i.cycleTimeData[0].out_flow === 0
                                                                ? i.cycleTimeData[0].out_flow
                                                                : '-'
                                                        }}</span>
                                                    </span>
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-if="i.componentType == '类型'"
                                                    >
                                                        <span
                                                            v-if="
                                                                !i.triggerData &&
                                                                i.cycleTimeData &&
                                                                i.cycleTimeData.length > 0 &&
                                                                i.cycleTimeData[0].type_data
                                                            "
                                                        >
                                                            <!-- {{
                                                            i.cycleTimeData[0].type_data[0].quantity +
                                                            i.cycleTimeData[0].type_data[1].quantity +
                                                            i.cycleTimeData[0].type_data[2].quantity
                                                        }} -->
                                                            {{ getTotal(i.cycleTimeData[0].type_data, 'quantity', 'value') }}
                                                        </span>
                                                        <span v-else-if="i.triggerData && i.triggerData.type_data">
                                                            {{ getTotal(i.triggerData.type_data, 'quantity', 'value') }}
                                                            <!-- <span
                                                            v-if="
                                                                !Number.isNaN(
                                                                    Number(
                                                                        i.triggerData.type_data[0].quantity +
                                                                            i.triggerData.type_data[1].quantity +
                                                                            i.triggerData.type_data[2].quantity
                                                                    )
                                                                )
                                                            "
                                                            >{{
                                                                i.triggerData.type_data[0].quantity +
                                                                i.triggerData.type_data[1].quantity +
                                                                i.triggerData.type_data[2].quantity
                                                            }}</span
                                                        >
                                                        <span v-else>0</span> -->
                                                        </span>
                                                        <span v-else>-</span>
                                                    </span>
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-if="i.componentType == '检测数'"
                                                        >{{
                                                            i.cycleTimeData[0].n_stay || i.cycleTimeData[0].n_stay === 0
                                                                ? i.cycleTimeData[0].n_stay
                                                                : '-'
                                                        }}</span
                                                    >
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-if="i.componentType == '排队数'"
                                                        >{{
                                                            i.cycleTimeData[0].n_queue || i.cycleTimeData[0].n_queue === 0
                                                                ? i.cycleTimeData[0].n_queue
                                                                : '-'
                                                        }}</span
                                                    >
                                                    <span style="font-size: 14px" v-if="i.componentType == '车头时距'">秒</span>
                                                    <span style="font-size: 13px" v-if="i.componentType == '速度'">
                                                        <span v-if="i.triggerData == null">
                                                            <span
                                                                v-if="
                                                                    (i.cycleTimeData[0].speed && i.cycleTimeData[0].speed != -1) ||
                                                                    i.cycleTimeData[0].speed === 0
                                                                "
                                                            >
                                                                {{
                                                                    i.cycleTimeData[0].speed > 0 || i.cycleTimeData[0].speed === 0
                                                                        ? 'km/h'
                                                                        : 'pix/s'
                                                                }}
                                                            </span>
                                                        </span>
                                                        <span v-else>
                                                            <span
                                                                v-if="
                                                                    (i.triggerData.speed && i.triggerData.speed != -1) ||
                                                                    i.triggerData.speed === 0
                                                                "
                                                            >
                                                                {{
                                                                    i.triggerData.speed > 0 || i.triggerData.speed === 0 ? 'km/h' : 'pix/s'
                                                                }}
                                                            </span>
                                                        </span>
                                                    </span>
                                                    <span style="font-size: 14px" v-if="i.componentType == '类型'">个</span>
                                                    <span style="font-size: 14px" v-if="i.componentType == '流量'">辆</span>
                                                    <span
                                                        style="font-size: 14px"
                                                        v-if="i.componentType == '检测数' || i.componentType == '排队数'"
                                                        >辆</span
                                                    >
                                                </div>
                                                <div class="time">
                                                    <span style="text-align: center" v-if="i.triggerData == null">{{
                                                        i.cycleTimeData[0].time
                                                    }}</span>
                                                    <span style="text-align: center" v-else>{{ i.triggerData.time }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-if="i.timeMode == '固定间隔'">
                                            <div class="cardContent" v-if="i.cycleStatisticsData && i.cycleStatisticsData.length > 0">
                                                <div class="count">
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-if="i.componentType == '速度' && i.triggerData == null"
                                                    >
                                                        <span
                                                            v-if="
                                                                (i.cycleStatisticsData[0].speed && i.cycleStatisticsData[0].speed != -1) ||
                                                                i.cycleStatisticsData[0].speed === 0
                                                            "
                                                        >
                                                            {{
                                                                i.cycleStatisticsData[0].speed > 0 || i.cycleStatisticsData[0].speed === 0
                                                                    ? i.cycleStatisticsData[0].speed
                                                                    : Math.abs(i.cycleStatisticsData[0].speed)
                                                            }}
                                                        </span>
                                                        <span v-else>-</span>
                                                    </span>
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-else-if="i.componentType == '速度' && i.triggerData != null"
                                                    >
                                                        <span
                                                            v-if="
                                                                (i.triggerData.speed && i.triggerData.speed != -1) ||
                                                                i.triggerData.speed === 0
                                                            "
                                                        >
                                                            {{ Math.abs(i.triggerData.speed) }}
                                                        </span>
                                                        <span v-else>-</span>
                                                    </span>
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-if="i.componentType == '车头时距' && i.triggerData == null"
                                                        >{{
                                                            i.cycleStatisticsData[0].ave_headway ||
                                                            i.cycleStatisticsData[0].ave_headway === 0
                                                                ? i.cycleStatisticsData[0].ave_headway == -1
                                                                    ? '-'
                                                                    : i.cycleStatisticsData[0].ave_headway
                                                                : '-'
                                                        }}</span
                                                    >
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-else-if="i.componentType == '车头时距' && i.triggerData != null"
                                                        >{{
                                                            i.triggerData.ave_headway || i.triggerData.ave_headway === 0
                                                                ? i.triggerData.ave_headway == -1
                                                                    ? '-'
                                                                    : i.triggerData.ave_headway
                                                                : '-'
                                                        }}</span
                                                    >
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-if="i.componentType == '流量' && i.triggerData == null"
                                                    >
                                                        <span v-if="i.flowType == '入流'">{{
                                                            i.cycleStatisticsData[0].in_flow || i.cycleStatisticsData[0].in_flow
                                                                ? i.cycleStatisticsData[0].in_flow
                                                                : '-'
                                                        }}</span>
                                                        <span v-if="i.flowType == '出流'">{{
                                                            i.cycleStatisticsData[0].out_flow || i.cycleStatisticsData[0].out_flow
                                                                ? i.cycleStatisticsData[0].out_flow
                                                                : '-'
                                                        }}</span>
                                                    </span>
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-else-if="i.componentType == '流量' && i.triggerData != null"
                                                    >
                                                        <span v-if="i.flowType == '入流'">{{
                                                            i.triggerData.inFlow || i.triggerData.inFlow ? i.triggerData.inFlow : '-'
                                                        }}</span>
                                                        <span v-if="i.flowType == '出流'">{{
                                                            i.triggerData.outFlow || i.triggerData.outFlow ? i.triggerData.outFlow : '-'
                                                        }}</span>
                                                    </span>
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-if="i.componentType == '类型'"
                                                    >
                                                        <span
                                                            v-if="
                                                                !i.triggerData && i.cycleStatisticsData && i.cycleStatisticsData.length > 0
                                                            "
                                                        >
                                                            <!-- {{JSON.stringify(i.cycleStatisticsData)}} -->
                                                            <!-- {{
                                                            i.cycleStatisticsData[0].type_data[0].quantity +
                                                            i.cycleStatisticsData[0].type_data[1].quantity +
                                                            i.cycleStatisticsData[0].type_data[2].quantity
                                                        }} -->
                                                            {{
                                                                i.cycleStatisticsData[0].type_data &&
                                                                i.cycleStatisticsData[0].type_data.length > 0
                                                                    ? getTotal(i.cycleStatisticsData[0].type_data, 'quantity', 'value')
                                                                    : '-'
                                                            }}
                                                        </span>
                                                        <span v-else-if="i.triggerData && i.triggerData.type_data">
                                                            <!-- {{i.triggerData[0].quantity + i.triggerData[1].quantity + i.triggerData[2].quantity}} -->
                                                            <!-- <span
                                                            v-if="
                                                                !Number.isNaN(
                                                                    Number(
                                                                        i.triggerData.type_data[0].quantity +
                                                                            i.triggerData.type_data[1].quantity +
                                                                            i.triggerData.type_data[2].quantity
                                                                    )
                                                                )
                                                            "
                                                            >{{
                                                                i.triggerData.type_data[0].quantity +
                                                                i.triggerData.type_data[1].quantity +
                                                                i.triggerData.type_data[2].quantity
                                                            }}</span
                                                        >
                                                        <span v-else>0</span> -->
                                                            {{ getTotal(i.triggerData.type_data, 'quantity', 'value') }}
                                                        </span>
                                                        <span v-else>-</span>
                                                    </span>
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-if="i.componentType == '检测数' && i.triggerData == null"
                                                        >{{
                                                            i.cycleStatisticsData[0].ave_stay || i.cycleStatisticsData[0].ave_stay === 0
                                                                ? i.cycleStatisticsData[0].ave_stay
                                                                : '-'
                                                        }}</span
                                                    >
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-else-if="i.componentType == '检测数' && i.triggerData != null"
                                                        >{{
                                                            i.triggerData.ave_stay || i.triggerData.ave_stay === 0
                                                                ? i.triggerData.ave_stay
                                                                : '-'
                                                        }}</span
                                                    >
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-if="i.componentType == '排队数' && i.triggerData == null"
                                                        >{{
                                                            i.cycleStatisticsData[0].ave_queue || i.cycleStatisticsData[0].ave_queue === 0
                                                                ? i.cycleStatisticsData[0].ave_queue
                                                                : '-'
                                                        }}</span
                                                    >
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-if="i.componentType == '排队数' && i.triggerData != null"
                                                        >{{
                                                            i.triggerData.ave_queue || i.triggerData.ave_queue === 0
                                                                ? i.triggerData.ave_queue
                                                                : '-'
                                                        }}</span
                                                    >
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-if="i.componentType == '延误' && i.triggerData == null"
                                                        >{{
                                                            i.cycleStatisticsData[0].ave_delay || i.cycleStatisticsData[0].ave_delay === 0
                                                                ? i.cycleStatisticsData[0].ave_delay
                                                                : '-'
                                                        }}</span
                                                    >
                                                    <span
                                                        style="color: rgb(71, 161, 255); font-size: 23px"
                                                        v-if="i.componentType == '延误' && i.triggerData != null"
                                                        >{{
                                                            i.triggerData.ave_delay || i.triggerData.ave_delay === 0
                                                                ? i.triggerData.ave_delay
                                                                : '-'
                                                        }}</span
                                                    >
                                                    <span
                                                        style="font-size: 14px"
                                                        v-if="i.componentType == '车头时距' || i.componentType == '延误'"
                                                        >秒</span
                                                    >
                                                    <span style="font-size: 13px" v-if="i.componentType == '速度'">
                                                        <span v-if="i.triggerData == null">
                                                            <span
                                                                v-if="
                                                                    (i.cycleStatisticsData[0].speed &&
                                                                        i.cycleStatisticsData[0].speed != -1) ||
                                                                    i.cycleStatisticsData[0].speed === 0
                                                                "
                                                            >
                                                                {{
                                                                    i.cycleStatisticsData[0].speed > 0 ||
                                                                    i.cycleStatisticsData[0].speed === 0
                                                                        ? 'km/h'
                                                                        : 'pix/s'
                                                                }}
                                                            </span>
                                                        </span>
                                                        <span v-else>
                                                            <span
                                                                v-if="
                                                                    (i.triggerData.speed && i.triggerData.speed != -1) ||
                                                                    i.triggerData.speed === 0
                                                                "
                                                            >
                                                                {{
                                                                    i.triggerData.speed > 0 || i.triggerData.speed === 0 ? 'km/h' : 'pix/s'
                                                                }}
                                                            </span>
                                                        </span>
                                                    </span>
                                                    <span style="font-size: 14px" v-if="i.componentType == '类型'">个</span>
                                                    <span style="font-size: 14px" v-if="i.componentType == '流量'">辆</span>
                                                    <span
                                                        style="font-size: 14px"
                                                        v-if="i.componentType == '检测数' || i.componentType == '排队数'"
                                                        >辆</span
                                                    >
                                                </div>
                                                <div class="time">
                                                    <span style="text-align: center" v-if="i.triggerData == null">{{
                                                        i.cycleStatisticsData[0].time
                                                    }}</span>
                                                    <span style="text-align: center" v-else>{{ i.triggerData.time }}</span>
                                                </div>
                                            </div>
                                            <el-empty :image-size="20" description="暂无数据" v-else></el-empty>
                                        </div>
                                    </el-card>
                                </div>
                            </div>
                            <div v-if="o.name == '图表区' && o.children.length != 0 && tabChangeIndex == y" class="chantArea">
                                <div class="chartSection">
                                    <el-radio-group
                                        v-model="o.selectOption"
                                        class="buttonList"
                                        @change="changeChat(o.children, o.selectOption)"
                                    >
                                        <el-radio-button :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"
                                                        :itemData="e"
                                                        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"
                                                        :itemData="e"
                                                        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%"
                                                        :itemData="e"
                                                        :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 == '实时触发'">
                                                    <div style="width: 100%; height: 100%" v-if="e.graphicType == '断面'">
                                                        <tableShow :tableData="e.triggerNewData" :triggerType="e.timeMode" />
                                                    </div>
                                                    <div style="width: 100%; height: 100%" v-if="e.graphicType == '区域'">
                                                        <regionTable :tableData="e.triggerNewData" :triggerType="e.timeMode" />
                                                    </div>
                                                </div>
                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
                                                    <div style="width: 100%; height: 100%" v-if="e.graphicType == '断面'">
                                                        <tableShow :tableData="e.cycleTimeData" :triggerType="e.timeMode" />
                                                    </div>
                                                    <div style="width: 100%; height: 100%" v-if="e.graphicType == '区域'">
                                                        <regionTable :tableData="e.cycleTimeData" :triggerType="e.timeMode" />
                                                    </div>
                                                </div>
                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
                                                    <div style="width: 100%; height: 100%" v-if="e.graphicType == '断面'">
                                                        <tableShow :tableData="e.cycleStatisticsData" :triggerType="e.timeMode" />
                                                    </div>
                                                    <div style="width: 100%; height: 100%" v-if="e.graphicType == '区域'">
                                                        <regionTable :tableData="e.cycleStatisticsData" :triggerType="e.timeMode" />
                                                    </div>
                                                </div>

                                                <!-- <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
                                                    <el-table :data="e.triggerNewData" style="width: 100%; height: 100%" height="250">
                                                        <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
                                                        <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
                                                        <el-table-column align="center" label="目标类型" prop="type">
                                                        </el-table-column>
                                                        <el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
                                                        <el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
                                                        <el-table-column align="center" prop="occ" label="占用状态">
                                                            <template slot-scope="scope">
                                                                <span v-if="scope.row.occ == '1'">占用</span>
                                                            </template>
                                                        </el-table-column>
                                                        <el-table-column align="center" prop="speed" label="空间平均速度">
                                                            <template slot-scope="scope">
                                                                {{
                                                                    scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
                                                                        ? Math.abs(scope.row.speed)
                                                                        : scope.row.speed == '-1'
                                                                        ? '-'
                                                                        : scope.row.speed
                                                                }}
                                                            </template>
                                                        </el-table-column>
                                                    </el-table>
                                                </div>
                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
                                                    <el-table :data="e.cycleTimeData" style="width: 100%; height: 100%" height="250">
                                                        <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
                                                        <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
                                                        <el-table-column align="center" label="目标类型" prop="type">
                                                        </el-table-column>
                                                        <el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
                                                        <el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
                                                        <el-table-column align="center" prop="occ" label="占用状态">
                                                            <template slot-scope="scope">
                                                                <span v-if="scope.row.occ == '1'">占用</span>
                                                            </template>
                                                        </el-table-column>
                                                        <el-table-column align="center" prop="speed" label="空间平均速度">
                                                            <template slot-scope="scope">
                                                                {{
                                                                    scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
                                                                        ? Math.abs(scope.row.speed)
                                                                        : scope.row.speed == '-1'
                                                                        ? '-'
                                                                        : scope.row.speed
                                                                }}
                                                            </template>
                                                        </el-table-column>
                                                    </el-table>
                                                </div>
                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
                                                    <el-table :data="e.cycleStatisticsData" style="width: 100%; height: 100%" height="250">
                                                        <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
                                                        <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
                                                        <el-table-column align="center" label="目标类型" prop="type">
                                                        </el-table-column>
                                                        <el-table-column align="center" prop="ave_stay" label="存车数"></el-table-column>
                                                        <el-table-column align="center" prop="ave_queue" label="排队数"></el-table-column>
                                                        <el-table-column align="center" prop="occ" label="占用状态">
                                                            <template slot-scope="scope">
                                                                <span v-if="scope.row.occ == '1'">占用</span>
                                                            </template>
                                                        </el-table-column>
                                                        <el-table-column align="center" prop="speed" label="空间平均速度">
                                                            <template slot-scope="scope">
                                                                {{
                                                                    scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
                                                                        ? Math.abs(scope.row.speed)
                                                                        : scope.row.speed == '-1'
                                                                        ? '-'
                                                                        : scope.row.speed
                                                                }}
                                                            </template>
                                                        </el-table-column>
                                                    </el-table>
                                                </div> -->
                                            </div>
                                            <div
                                                style="width: 100%; height: 100%"
                                                v-show="e.presentationForm == '饼状图' && o.selectOption == b + 1"
                                            >
                                                <div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
                                                    <span class="titleIcon"></span>
                                                    {{ e.name }}
                                                </div>
                                                <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
                                                    <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 }">
                        <template v-if="addChartTitle == '添加图表'">
                            <span v-if="node.level != 4"> {{ node.label }}</span>
                            <el-checkbox-group
                                v-model="checkList"
                                :disabled="
                                    disabledCheckList.includes(
                                        `${node.label},${node.parent.data.componentId},${node.parent.parent.parent.data.videoId}`
                                    )
                                "
                                v-else
                                @change="changeChild(data, node)"
                            >
                                <el-checkbox
                                    :label="
                                        !data.componentId
                                            ? node.label + ',' + node.parent.data.componentId + ',' + node.parent.parent.parent.data.videoId
                                            : data.componentId + ',' + node.parent.parent.parent.data.videoId
                                    "
                                >
                                    {{ node.label }}
                                </el-checkbox>
                            </el-checkbox-group>
                        </template>
                        <template v-if="addChartTitle == '添加分析项'">
                            <span v-if="node.level != 3"> {{ node.label }}</span>
                            <el-checkbox-group
                                v-model="checkList"
                                :disabled="disabledCheckList.includes(`${data.componentId},${node.parent.parent.data.videoId}`)"
                                v-else
                                @change="changeChild(data, node)"
                            >
                                <el-checkbox
                                    :label="
                                        !data.componentId
                                            ? node.label + ',' + node.parent.data.componentId + ',' + node.parent.parent.data.videoId
                                            : data.componentId + ',' + node.parent.parent.data.videoId
                                    "
                                >
                                    {{ node.label }}
                                </el-checkbox>
                            </el-checkbox-group>
                        </template>
                        <!-- <el-checkbox-group
              v-model="data.checked"
              v-else
              @change="changeChild(data, node)"
            >
              <el-checkbox :label="node.key" :disabled="data.disabled">
                {{ node.label }}
              </el-checkbox>
            </el-checkbox-group> -->

                        <!-- <el-radio v-model="data.checked"
                      :label="node.key"
                      :disabled="data.disabled"
                      v-else>
              {{ node.label }}
            </el-radio> -->
                    </span>
                </el-tree>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addChildDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addChildNode">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
let id = 1000;
import chartsLine from '@/components/sensorFusion/echartsLine.vue';
import chartsPie from '@/components/sensorFusion/echartsPie.vue';
import chartsBar from '@/components/sensorFusion/echartsBar.vue';
import MeanValue from '../../components/sensorFusion/meanValue.vue';
import thermalOD from '@/components/sensorFusion/thermalOD';
import tableShow from '@/components/sensorFusion/tableShow.vue';
import regionTable from '@/components/sensorFusion/regionTable.vue';
import {
    getRealTimeShipjk, //获取实时视频
    getDuocgqrhpz, //获取树形数据
    getChartComponent, //获取图表
    getNumericalComponent, //获取卡片
    addDuocgqrhpz, //添加节点
    deleteDuocgqrhpz, //删除节点
    editDuocgqrhpzSort, //节点拖拽配许
    editDuocgqrhpz, //编辑节点
    getAssembly, // 获取多传感器融合
    getSelectedComponent //获取已选的组件数据接口
} from '@/api/sensorFusion.js';
import 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延误
            disabledCheckList: [] //tree不可选数组
        };
    },
    mounted() {
        //获取视频列表
        this.getRealTimeShipjk();
        //获取多融合数据
        this.getSensorFusionData();
    },
    methods: {
        //类型数据累计
        getTotal(arr, field, field2) {
            let total = 0;
            if (arr && arr.length > 0) {
                total = arr.reduce((accumulator, item) => {
                    let t = 0;
                    if (item[field] || item[field] === 0) {
                        t = item[field];
                    }
                    if (item[field2] || item[field2] === 0) {
                        t = item[field2];
                    }

                    if (t || t === 0) {
                        const fieldValue = parseFloat(t);
                        if (!isNaN(fieldValue)) {
                            return accumulator + fieldValue;
                        }
                    }
                    return accumulator; // 如果无效则不累加
                }, 0);
            }

            return total;
        },
        //获取视频列表接口
        getRealTimeShipjk() {
            getRealTimeShipjk().then((res) => {
                this.videoList = res.data.data;
            });
        },
        //获取多融合传感器融合数据
        getSensorFusionData() {
            getAssembly({
                Number: 10
            }).then((res) => {
                this.intersectionList = res.data.data || [];

                this.addSelectOptionField(this.intersectionList);
                // this.addTriggerDataField(this.intersectionList);
                //mqtt订阅
                // this.$nextTick(() => {
                this.getMqtt();
                // });

                //console.log(this.intersectionList, 'this.intersectionList');
                //开发路口默认展开第一个
                if (this.intersectionList.length > 0) {
                    let children = this.intersectionList[0].children || [];
                    if (children.length > 0) {
                        this.intersectionName = [children[0].name];
                    }
                }
                // 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;
                        obj['triggerNewData'] = [];
                    }
                }
            }
        },
        addTriggerDataField(obj) {
            if (Array.isArray(obj)) {
                obj.forEach((item) => {
                    this.addTriggerDataField(item);
                });
            } else if (typeof obj == 'object') {
                for (let key in obj) {
                    if (typeof obj[key] == 'object') {
                        this.addTriggerDataField(obj[key]);
                    } else if (key == 'name') {
                        obj['triggerData'] = '';
                    }
                }
            }
        },
        //获取所有配置节点
        getDuocgqrhpz() {
            let threeDataList = [];
            getDuocgqrhpz().then((res) => {
                if (res.data.code == 200) {
                    this.threeData = this.replaceNameWithLabel(res.data.data);
                    this.addShowInputField(this.threeData);
                    // this.threeData = threeDataList;
                    for (let i = 0; i < this.threeData.length; i++) {
                        this.addParentSort = this.threeData[i].sort;
                    }
                    //console.log(this.threeData, 'this.threeData');
                } else {
                    this.$message.warning(res.data.msg);
                }
            });
        },
        // 将接口中的所有name字段变为label字段
        replaceNameWithLabel(obj) {
            if (Array.isArray(obj)) {
                return obj.map((item) => {
                    if (typeof item == 'object') {
                        return this.replaceNameWithLabel(item);
                    } else {
                        return item;
                    }
                });
            } else if (typeof obj == 'object') {
                const newObj = {};
                for (let key in obj) {
                    if (typeof obj[key] == 'object') {
                        newObj[key] = this.replaceNameWithLabel(obj[key]);
                    } else if (key == 'name') {
                        newObj['label'] = obj[key];
                    } else {
                        newObj[key] = obj[key];
                    }
                }
                return newObj;
            } else {
                return obj;
            }
        },

        //添加showInput字段
        addShowInputField(obj) {
            if (Array.isArray(obj)) {
                obj.forEach((item) => {
                    this.addShowInputField(item);
                });
            } else if (typeof obj == 'object') {
                for (let key in obj) {
                    if (typeof obj[key] == 'object') {
                        this.addShowInputField(obj[key]);
                    } else if (key == 'label') {
                        obj['showInput'] = false;
                    }
                }
            }
        },
        //子添加checked字段
        addCheckedField(obj) {
            if (Array.isArray(obj)) {
                obj.forEach((item) => {
                    this.addCheckedField(item);
                });
            } else if (typeof obj === 'object') {
                for (let key in obj) {
                    if (typeof obj[key] === 'object') {
                        this.addCheckedField(obj[key]);
                    } else if (key === 'videoName') {
                        obj['checked'] = false;
                    }
                }
            }
        },
        //配置弹窗点击事件
        handleDialog() {
            this.threeData = [];
            this.getDuocgqrhpz();
            this.centerDialogVisible = true;
        },
        //折叠面板点击展开事件
        handleCollapseChange(val) {
            //console.log(val, '折叠面板展开事件', this.intersectionName);
            this.intersectionName = val;
        },
        handleNodeClick(nodeData) {},

        //层级标题不同
        getFontSize(node) {
            // 根据节点层级返回对应的字体大小
            // 可以根据需要定义自己的逻辑
            // 这里只是简单示例，可以根据具体的需求进行修改
            if (
                (node.level != 2 &&
                    node.level != 3 &&
                    node.level == 4 &&
                    (node.label.includes('图') || node.label.includes('表格') || node.label.includes('数值'))) ||
                node.level == 5 ||
                node.level == 1
            ) {
                return '14px';
            } else if (node.level == 4 && (!node.label.includes('图') || !node.label.includes('表格') || node.label.includes('数值'))) {
                return '16px'; // 四级卡片
            } else {
                return '16px';
            }
        },
        //改变颜色
        getColor(node) {
            if (
                (node.level != 2 &&
                    node.level != 3 &&
                    node.level == 4 &&
                    (node.label.includes('图') || node.label.includes('表格') || node.label.includes('数值'))) ||
                node.level == 5
            ) {
                return 'rgb(172,172,172)';
            } else if (node.level == 4 && (!node.label.includes('图') || !node.label.includes('表格') || node.label.includes('数值'))) {
                return 'rgb(116,116,116)'; // 四级卡片
            } else {
                return 'rgb(116,116,116)';
            }
        },
        //设置背景色
        getBackground(node) {
            if (node.level == 1) {
                return 'rgba(172,172,172,0.2)';
            } else if (node.level == 3) {
                if (node.label == '卡片区') {
                    return 'rgba(255,241,229,0.7)';
                } else {
                    return 'rgba(237,255,229,0.7)';
                }
            }
        },
        //只能选中同级排序
        allowDrop(draggingNode, dropNode, type) {
            //注掉的是同级拖拽
            if (draggingNode.level === dropNode.level) {
                //console.log('拖拽');
                return type === 'prev' || type === 'next';
            } else {
                // 不同级进行处理
                return false;
            }
        },
        //排序编辑完成
        nodeDrop(data, dropPosition, event) {
            let dataList = [];
            if (dropPosition.level != 1) {
                for (let i = 0; i < dropPosition.parent.data.children.length; i++) {
                    dataList.push({
                        DuocgqrhpzId: dropPosition.parent.data.children[i].duocgqrhpzId,
                        Sort: i + 1
                    });
                }
            } else {
                for (let i = 0; i < this.threeData.length; i++) {
                    dataList.push({
                        DuocgqrhpzId: this.threeData[i].duocgqrhpzId,
                        Sort: i + 1
                    });
                }
            }
            editDuocgqrhpzSort(dataList)
                .then((res) => {
                    if (res.data.code == 200) {
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.warning(res.data.msg);
                    }
                })
                .catch((err) => {
                    //console.log(err);
                });
        },
        //将子组件得名称统一
        renameField(obj, oldFieldName, newFieldName) {
            if (Array.isArray(obj)) {
                obj.forEach((item) => {
                    this.renameField(item, oldFieldName, newFieldName);
                });
            } else if (typeof obj === 'object') {
                for (let key in obj) {
                    if (typeof obj[key] === 'object') {
                        this.renameField(obj[key], oldFieldName, newFieldName);
                    } else if (key === oldFieldName) {
                        obj[newFieldName] = obj[key];
                        delete obj[key];
                    }
                }
            }
        },
        // 树形节点得添加删除
        append(data, node) {
            this.checkList = []; //多选数据为空
            this.defaultExpanded = [];
            this.addOneSort = 0; //一级节点排序
            this.addTwoSort = 0; //卡片区下面的节点排序
            this.addCardSort = 0; //卡片区排序
            this.addChartSort = 0; //图表区排序
            this.addChildThreeData = [];
            this.addParent = false;
            if (data.label == '图表区') {
                this.addChartTitle = '添加图表';
                this.addChildType = data.label;
                //父id
                this.addChildParentId = data.duocgqrhpzId;
                this.addChildDialogVisible = true;
                getChartComponent().then((res) => {
                    //吧子数组变成想要的
                    let transformedData = res.data.data.map((item) => {
                        // let newData = {
                        //     videoId: item.videoId,
                        //     videoName: item.videoName,
                        //     data: item.data.map((subItem) => {
                        //         let presentationForms = subItem.presentationForm.split(',');
                        //         return {
                        //             componentId: subItem.componentId,
                        //             componentName: subItem.componentName,
                        //             interfaceComponentId: subItem.interfaceComponentId,
                        //             presentationForm: subItem.presentationForm,
                        //             data: presentationForms.map((form) => ({ videoName: form }))
                        //         };
                        //     })
                        // };
                        // return newData;
                        const newData = item.data.reduce((acc, obj) => {
                            const existingData = acc.find((entry) => entry.combinationName === obj.combinationName);
                            let presentationForms = obj.presentationForm.split(',');
                            if (existingData) {
                                existingData.data.push({
                                    componentId: obj.componentId,
                                    componentName: obj.componentName,
                                    interfaceComponentId: obj.interfaceComponentId,
                                    presentationForm: obj.presentationForm,
                                    data: presentationForms.map((form) => ({ videoName: form }))
                                });
                            } else {
                                acc.push({
                                    combinationName: obj.combinationName,
                                    data: [
                                        {
                                            componentId: obj.componentId,
                                            componentName: obj.componentName,
                                            interfaceComponentId: obj.interfaceComponentId,
                                            presentationForm: obj.presentationForm,
                                            data: presentationForms.map((form) => ({ videoName: form }))
                                        }
                                    ]
                                });
                            }
                            return acc;
                        }, []);
                        return {
                            ...item,
                            data: newData
                        };
                    });
                    this.renameField(transformedData, 'combinationName', 'videoName');
                    this.renameField(transformedData, 'componentName', 'videoName');
                    this.addCheckedField(transformedData);
                    this.addChildThreeData = transformedData;
                    // this.addChildThreeData.map((item) => {
                    //     item.data.map((key) => {
                    //         key.data = key.data.filter((d) => d.videoName != '数值');
                    //     });
                    // });
                    this.addChildThreeData.map((item) => {
                        item.data.map((key) => {
                            key.data.map((t) => {
                                t.data = t.data.filter((d) => d.videoName != '数值');
                            });
                        });
                    });
                    // console.log(this.addChildThreeData, ' this.addChildThreeData');
                });
                this.addThreeNodeData.data = data;
                this.addThreeNodeData.node = node;
                for (let i = 0; i < this.addThreeNodeData.data.children.length; i++) {
                    this.addChartSort = this.addThreeNodeData.data.children[i].sort;
                }
                this.disabledCheckList = [];
                getSelectedComponent({
                    DuocgqrhpzId: data.duocgqrhpzId
                }).then((res) => {
                    res.data.data.forEach((item) => {
                        this.checkList.push(`${item.presentationForm},${item.analogAreaComponentId},${item.videoId}`);
                        this.disabledCheckList.push(`${item.presentationForm},${item.analogAreaComponentId},${item.videoId}`);
                        this.defaultExpanded.push(item.analogAreaComponentId);
                        // item.data.forEach((subItem) => {
                        //   const labels = subItem.presentationForm.split(",");
                        //   labels.forEach((label) => {
                        //     if (label != "数值") {
                        //       this.checkList.push(
                        //         `${label},${subItem.componentId},${item.videoId}`
                        //       );
                        //     }
                        //   });
                        // });
                    });
                    // console.log(this.disabledCheckList, ' this.disabledCheckList');
                    // console.log(this.checkList, ' this.disabledCheckList');
                });
            } else if (node.level == 4) {
                this.addChartTitle = '添加分析项';
                this.addChildType = '';
                //父id
                this.addChildParentId = data.duocgqrhpzId;
                this.addChildDialogVisible = true;
                getNumericalComponent().then((res) => {
                    this.renameField(res.data.data, 'componentName', 'videoName');
                    //吧子数组变成想要的
                    const transformedData = res.data.data.map((item) => {
                        const newData = item.data.reduce((acc, obj) => {
                            const existingData = acc.find((entry) => entry.combinationName === obj.combinationName);
                            if (existingData) {
                                existingData.data.push({
                                    componentId: obj.componentId,
                                    videoName: obj.videoName
                                });
                            } else {
                                acc.push({
                                    combinationName: obj.combinationName,
                                    data: [
                                        {
                                            componentId: obj.componentId,
                                            videoName: obj.videoName
                                        }
                                    ]
                                });
                            }
                            return acc;
                        }, []);

                        return {
                            ...item,
                            data: newData
                        };
                    });
                    this.renameField(transformedData, 'combinationName', 'videoName');
                    this.addCheckedField(transformedData);
                    this.addChildThreeData = transformedData;
                    //添加checked字段
                });
                this.addThreeNodeData.data = data;
                this.addThreeNodeData.node = node;
                for (let i = 0; i < this.addThreeNodeData.data.children.length; i++) {
                    this.addCardSort = this.addThreeNodeData.data.children[i].sort;
                }
                this.disabledCheckList = [];
                getSelectedComponent({
                    DuocgqrhpzId: data.duocgqrhpzId
                }).then((res) => {
                    res.data.data.forEach((item) => {
                        this.checkList.push(`${item.analogAreaComponentId},${item.videoId}`);
                        this.disabledCheckList.push(`${item.analogAreaComponentId},${item.videoId}`);
                        this.defaultExpanded.push(item.analogAreaComponentId);
                        // item.data.forEach((subItem) => {
                        //   // const labels = subItem.presentationForm.split(",");
                        //   // labels.forEach((label) => {
                        //   if (subItem.presentationForm.includes("数值")) {
                        //     this.checkList.push(
                        //       `${subItem.componentName},${subItem.componentId},${item.videoId}`
                        //     );
                        //   }
                        //   // });
                        // });
                    });
                });
            } else {
                //给普通节点赋值
                this.addChildType = '';
                this.addThreeNodeData.data = data;
                this.addThreeNodeData.node = node;
                this.addDialogVisible = true;
                this.addForm.name = '';
                if (this.addThreeNodeData.node.level == 1) {
                    this.addTitle = '添加';
                    for (let i = 0; i < this.addThreeNodeData.data.children.length; i++) {
                        this.addOneSort = this.addThreeNodeData.data.children[i].sort;
                    }
                } else if (this.addThreeNodeData.node.level == 3) {
                    this.addTitle = '添加卡片';
                    for (let i = 0; i < this.addThreeNodeData.data.children.length; i++) {
                        this.addTwoSort = this.addThreeNodeData.data.children[i].sort;
                    }
                }
            }
            // getSelectedComponent
            // const newChild = { id: id++, label: 'testtest', children: [] };
            // if (!data.children) {
            //     this.$set(data, 'children', []);
            // }
            // data.children.push(newChild);
        },
        //最子节点选中事件
        changeChild(data, node) {
            // if (
            //   (this.checkList.length >= 6 && this.addChildType != "图表区") ||
            //   (this.checkList.length >= 8 && this.addChildType == "图表区")
            // ) {
            //   this.$message.warning("组件类型添加上限!");
            // }
            //给节点赋值
            this.addThreeChildData.data = data;
            this.addThreeChildData.node = node;
            //console.log(this.addThreeChildData.data, 'this.addThreeChildData.node', this.addThreeChildData.node);
        },
        //最子节点添加
        addChildNode() {
            this.checkDataList = [];
            //给添加多选的赋值

            //console.log(this.checkDataList, 'this.checkDataList');
            let params = {
                ParentId: '',
                Name: '',
                Type: '',
                Sort: '',
                // AnalogAreaComponentId: "",
                // PresentationForm: "", //展现形式
                // VideoId: "",
                list: []
            };
            if (this.addChildType == '图表区') {
                this.checkDataList = this.checkList.map((item, index) => {
                    let parts = item.split(',');
                    return {
                        AnalogAreaComponentId: parts[1],
                        PresentationForm: parts[0],
                        VideoId: parts[2],
                        Sort: index + 1
                    };
                });
                params = {
                    ParentId: this.addChildParentId,
                    Name: '',
                    Type: 2,
                    Sort: '',
                    // AnalogAreaComponentId: this.addThreeChildData.node.parent.data.componentId,
                    // PresentationForm: this.addThreeChildData.data.videoName, //展现形式
                    // VideoId: this.addThreeChildData.node.parent.parent.data.videoId,
                    list: this.checkDataList
                };
            } else {
                this.checkDataList = this.checkList.map((item, index) => {
                    let parts = item.split(',');
                    return {
                        AnalogAreaComponentId: parts[0],
                        PresentationForm: '',
                        VideoId: parts[1],
                        Sort: index + 1
                    };
                });
                params = {
                    ParentId: this.addChildParentId,
                    Name: '',
                    Type: 2,
                    Sort: '',
                    // AnalogAreaComponentId: this.addThreeChildData.data.componentId,
                    // PresentationForm: "", //展现形式
                    // VideoId: this.addThreeChildData.node.parent.parent.data.videoId,
                    list: this.checkDataList
                };
            }
            // if (
            //   (this.checkDataList.length >= 6 && this.addChildType != "图表区") ||
            //   (this.checkDataList.length >= 8 && this.addChildType == "图表区")
            // ) {
            //   this.$message.warning("组件类型添加上限!");
            //   return false;
            // } else {
            addDuocgqrhpz(params)
                .then((res) => {
                    if (res.data.code == 200) {
                        this.$message.success(res.data.msg);
                        this.addChildDialogVisible = false;
                        this.threeData = [];
                        this.getDuocgqrhpz();
                    } else {
                        this.$message.warning(res.data.msg);
                    }
                })
                .catch((err) => {
                    //console.log(err);
                });
            // }
        },
        //删除节点
        remove(node, data) {
            this.$confirm('确认删除此节点, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    deleteDuocgqrhpz({
                        DuocgqrhpzId: data.duocgqrhpzId
                    })
                        .then((res) => {
                            if (res.data.code == 200) {
                                this.$message.success('删除成功');
                                // const parent = node.parent;
                                // const children = parent.data.children || parent.data;
                                // const index = children.findIndex((d) => d.id === data.id);
                                // children.splice(index, 1);
                                this.threeData = [];
                                this.getDuocgqrhpz();
                            } else {
                                this.$message.warning(res.data.msg);
                            }
                        })
                        .catch((err) => {
                            //console.log(err);
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    });
                });
        },
        //卡片区单选择
        addChildClick(data) {
            // 将其他节点的选中状态设为 false
            this.traverseTree(this.addChildThreeData, (node) => {
                if (node !== data) {
                    node.checked = false;
                }
            });
        },
        traverseTree(nodes, callback) {
            // 递归遍历树节点
            for (let i = 0; i < nodes.length; i++) {
                const node = nodes[i];
                callback(node);
                if (node.data) {
                    this.traverseTree(node.data, callback);
                }
            }
        },
        //父节点添加
        addParentNode() {
            this.addTitle = '添加';
            this.addParent = true;
            this.addDialogVisible = true;
            this.addForm.name = '';
            this.addThreeNodeData.data = null;
            this.addThreeNodeData.node = null;
        },
        //普通输入框添加节点
        addThreeNode() {
            //console.log(this.addThreeNodeData.data, 'this.addThreeNodeData.data');
            let params = {
                ParentId: '',
                Name: '',
                Type: '',
                Sort: ''
            };
            let sort = 0;
            if (this.addParent) {
                params = {
                    ParentId: 0,
                    Name: this.addForm.name,
                    Type: 0,
                    Sort: this.addParentSort + 1
                };
            } else {
                let type = 0;
                if (this.addThreeNodeData.node.level == 1) {
                    type = 1;
                    sort = this.addOneSort + 1;
                } else if (this.addThreeNodeData.node.level == 3) {
                    sort = this.addTwoSort + 1;
                }
                params = {
                    ParentId: this.addThreeNodeData.data.duocgqrhpzId,
                    Name: this.addForm.name,
                    Type: type,
                    Sort: sort
                };
            }
            if (this.addThreeNodeData.data != null && this.addThreeNodeData.data.children.length >= 3) {
                this.$message.warning('卡片区最多只能添加3个!');
                return false;
            } else {
                // qs.stringify(params)
                addDuocgqrhpz(params)
                    .then((res) => {
                        if (res.data.code == 200) {
                            this.$message.success(res.data.msg);
                            this.addDialogVisible = false;
                            this.threeData = [];
                            this.getDuocgqrhpz();
                        } else {
                            this.$message.warning(res.data.msg);
                        }
                    })
                    .catch((err) => {
                        //console.log(err);
                    });
            }
        },
        // //获得焦点
        focus(event) {
            // //console.log(event);
            event.currentTarget.select();
        },
        //修改功能   inp
        inp(value, data) {
            data.label = value;
        },
        //失去焦点后
        alters(node, data) {
            //console.log(data.label, '失去焦点');
            data.showInput = false;
            const label = document.getElementById(data.duocgqrhpzId);
            const changeinput = document.querySelector('.input' + data.duocgqrhpzId);
            changeinput.style.display = 'none';
            label.style.display = 'block';
            // this.focus(event)
            // this.$nextTick(function() { // //DOM 更新了
            //   this.$refs.inputVal.focus();
            // });
            let params = {
                DuocgqrhpzId: data.duocgqrhpzId,
                Name: data.label
            };
            editDuocgqrhpz(qs.stringify(params))
                .then((res) => {
                    if (res.data.code == 200) {
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.warning(res.data.msg);
                    }
                })
                .catch((err) => {
                    //console.log(err);
                });
        },
        alter(node, data) {
            //console.log(data, '编辑', this.threeData);
            data.showInput = true;
            const label = document.getElementById(data.duocgqrhpzId);
            const changeinput = document.querySelector('.input' + data.duocgqrhpzId);
            changeinput.style.display = 'block';
            label.style.display = 'none';
            // this.focus(event)
            this.$nextTick(() => {
                if (changeinput) {
                    changeinput.focus();
                }
            });
        },
        //鼠标悬浮
        showTooltip(id) {
            // const hover = document.querySelector('.hovered' + id);
            if (id) {
                const title = document.querySelector('.tooltip' + id);

                this.$nextTick(() => {
                    title.style.position = 'absolute';
                    title.style.display = 'block';
                    title.style.backgroundColor = '#f7f7f7';
                    title.style.border = '1px solid #ccc';
                });
            }
        },
        //鼠标移出
        hideTooltip(id) {
            // const title = document.querySelector('.tooltip' + id);
            if (id) {
                const title = document.querySelector('.tooltip' + id);

                this.$nextTick(() => {
                    // this.hovered = false;
                    title.style.display = 'none';
                });
            }
        },
        //二级鼠标悬浮
        showCardtip(id) {
            // const hover = document.querySelector('.hovered' + id);
            if (id) {
                const title = document.querySelector('.cardTitle1' + id);
                this.$nextTick(() => {
                    title.style.position = 'absolute';
                    title.style.display = 'block';
                    title.style.backgroundColor = '#f7f7f7';
                    title.style.border = '1px solid #ccc';
                    // title.style.top = '120px';
                    title.style.width = '110px';
                });
            }
        },
        //二级鼠标移出
        hideCardtip(id) {
            if (id) {
                const title = document.querySelector('.cardTitle1' + id);
                this.$nextTick(() => {
                    // this.hovered = false;
                    title.style.display = 'none';
                });
            }
        },

        //单选按钮选择事件
        changeChat(val, index) {
            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); // 递归调用，继续遍历下一层级的数据
                }
            }
        },
        //实时触发表格添加数据
        triggerDataCharts(data, videoId, analogAreaComponentId, newValue, time, table) {
            for (let i = 0; i < data.length; i++) {
                for (let j = 0; j < data[i].children.length; j++) {
                    for (let n = 0; n < data[i].children[j].children.length; n++) {
                        if (data[i].children[j].children[n].name == '图表区') {
                            for (let m = 0; m < data[i].children[j].children[n].children.length; m++) {
                                if (
                                    data[i].children[j].children[n].children[m].videoId == videoId &&
                                    data[i].children[j].children[n].children[m].analogAreaComponentId == analogAreaComponentId
                                ) {
                                    if (data[i].children[j].children[n].children[m].componentType == '类型') {
                                        let typeData = {
                                            name: table.name,
                                            time: time,
                                            type: table.type,
                                            n_stay: table.n_stay,
                                            n_queue: table.n_queue,
                                            occ: table.occ,
                                            speed: table.speed,
                                            type_data: newValue,
                                            originalSpeed: table.originalSpeed
                                        };
                                        this.addTimeDataCharts(data[i].children[j].children[n].children[m].triggerNewData, typeData);
                                    } else {
                                        if (data[i].children[j].children[n].children[m].triggerNewData.length > 10) {
                                            data[i].children[j].children[n].children[m].triggerNewData =
                                                data[i].children[j].children[n].children[m].triggerNewData.slice(-10);
                                        }
                                        this.addTimeDataCharts(data[i].children[j].children[n].children[m].triggerNewData, newValue);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        },
        //固定时刻图表添加数据
        timeDataCharts(data, videoId, analogAreaComponentId, newValue, time, table) {
            for (let i = 0; i < data.length; i++) {
                for (let j = 0; j < data[i].children.length; j++) {
                    for (let n = 0; n < data[i].children[j].children.length; n++) {
                        if (data[i].children[j].children[n].name == '图表区') {
                            for (let m = 0; m < data[i].children[j].children[n].children.length; m++) {
                                if (
                                    data[i].children[j].children[n].children[m].videoId == videoId &&
                                    data[i].children[j].children[n].children[m].analogAreaComponentId == analogAreaComponentId
                                ) {
                                    if (data[i].children[j].children[n].children[m].componentType == '类型') {
                                        let typeData = {
                                            name: table.name,
                                            time: time,
                                            type: table.type,
                                            n_stay: table.n_stay,
                                            n_queue: table.n_queue,
                                            occ: table.occ,
                                            speed: table.speed,
                                            type_data: newValue,
                                            headway: table.headway,
                                            avg: table.avg,
                                            max: table.max,
                                            med: table.med,
                                            min: table.min,
                                            originalSpeed: table.originalSpeed
                                        };
                                        // if (data[i].children[j].children[n].children[m].cycleTimeData.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
                                        // };
                                        let typeData = {
                                            type_data: newValue,
                                            time: time,
                                            name: table.name,
                                            type: table.type,
                                            in_flow: table.in_flow,
                                            out_flow: table.out_flow,
                                            ave_stay: table.ave_stay,
                                            ave_queue: table.ave_queue,
                                            ave_occ: table.ave_occ,
                                            ave_delay: table.ave_delay,
                                            type_data: table.type_data,
                                            ave_headway: table.ave_headway,
                                            avg: table.avg,
                                            max: table.max,
                                            med: table.med,
                                            min: table.min,
                                            occ: table.occ,
                                            originalSpeed: table.speed,
                                            gate_id: table.gate_id,
                                            interval: table.interval,
                                            flow: table.flow,
                                            in_spd: table.in_spd,
                                            out_spd: table.out_spd
                                        };
                                        // if (data[i].children[j].children[n].children[m].cycleStatisticsData.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,
                    'cycle_accumulate-' + this.videoList[i].videoId
                );
                this.topicVideoIdList.push({ videoId: this.videoList[i].videoId });
            }
            // console.log('在sensorFusion融合页面')
            window.PubScribe(this.topicSends, -1, this.realInfo, true, '融合页面');
        },
        //mqtt订阅
        realInfo(topic, message, videoId) {
            let dataList = this.intersectionList;
            // //console.log(topic, message, 'mqtt数据', videoId);
            for (let i = 0; i < this.topicVideoIdList.length; i++) {
                switch (topic) {
                    // 接收托片
                    case 'trigger-' + this.topicVideoIdList[i].videoId:
                        try {
                            //console.log("trigger_msgN",message)
                            const utf8decoder = new TextDecoder();
                            const u8arr = new Uint8Array(message);
                            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                            var detId = [];
                            const msgN = JSON.parse(temp);
                            // console.log('实时触发trigger-', msgN);
                            for (let j = 0; j < msgN.length; j++) {
                                const locations = this.findLocationById(this.intersectionList, msgN[j].component_id);
                                //处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
                                let newSpeed = '-';
                                if ((msgN[j].speed && msgN[j].speed != -1) || msgN[j].speed === 0) {
                                    newSpeed = Math.abs(msgN[j].speed);
                                }
                                // if (locations == '卡片区') {
                                if (msgN[j].component_type == '车头时距') {
                                    // if (locations == '卡片区' || locations == '两个区都存在') {

                                    //  if(locations == '图表区' || locations == '两个区都存在'){
                                    // console.log('实时触发trigger-车头时距', msgN[j].time);
                                    //图表区数组
                                    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
                                        );
                                    });
                                    //表格数据
                                    let carTou = {
                                        name: msgN[j].name,
                                        time: msgN[j].time,
                                        type: msgN[j].type,
                                        n_stay: msgN[j].n_stay,
                                        n_queue: msgN[j].n_queue,
                                        occ: msgN[j].occ,
                                        speed: newSpeed,
                                        originalSpeed: msgN[j].speed
                                    };
                                    this.$nextTick(() => {
                                        this.triggerDataCharts(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            carTou
                                        );
                                    });

                                    //之前错误逻辑，不知道为啥怎么处理
                                    // this.addOrUpdateArrayItem(this.tableData, {
                                    //     name: msgN[j].name,
                                    //     time: msgN[j].time,
                                    //     type: msgN[j].type,
                                    //     n_stay: msgN[j].n_stay,
                                    //     n_queue: msgN[j].n_queue,
                                    //     occ: msgN[j].occ,
                                    //     speed: newSpeed,
                                    //     originalSpeed: msgN[j].speed
                                    // });
                                    // }
                                    //卡片区
                                    let map = {
                                        time: msgN[j].time,
                                        headway: msgN[j].headway
                                    };
                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            map
                                        );
                                    });
                                } else if (msgN[j].component_type == '流量') {
                                    // console.log('实时触发trigger-流量', msgN[j]);
                                    //图表区
                                    this.addOrUpdateArrayItem(this.triggerFlowData, {
                                        time: msgN[j].time,
                                        in_flow: msgN[j].in_flow,
                                        out_flow: msgN[j].out_flow
                                    });
                                    this.$nextTick(() => {
                                        this.upDataListByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            this.triggerFlowData
                                        );
                                    });
                                    //卡片区
                                    let flowMap = {
                                        inFlow: msgN[j].in_flow,
                                        outFlow: msgN[j].out_flow,
                                        time: msgN[j].time
                                    };
                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            flowMap
                                        );
                                    });
                                    //表格数据
                                    let carTou = {
                                        name: msgN[j].name,
                                        time: msgN[j].time,
                                        type: msgN[j].type,
                                        n_stay: msgN[j].n_stay,
                                        n_queue: msgN[j].n_queue,
                                        occ: msgN[j].occ,
                                        speed: newSpeed,
                                        originalSpeed: msgN[j].speed
                                    };
                                    this.$nextTick(() => {
                                        this.triggerDataCharts(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            carTou
                                        );
                                    });
                                    //之前错误逻辑，不知道为啥怎么处理
                                    // this.addOrUpdateArrayItem(this.tableData, {
                                    //     name: msgN[j].name,
                                    //     time: msgN[j].time,
                                    //     type: msgN[j].type,
                                    //     n_stay: msgN[j].n_stay,
                                    //     n_queue: msgN[j].n_queue,
                                    //     occ: msgN[j].occ,
                                    //     speed: newSpeed,
                                    //     originalSpeed: msgN[j].speed
                                    // });
                                } else if (msgN[j].component_type == '速度') {
                                    //卡片区
                                    let map = {
                                        speed: msgN[j].speed,
                                        time: msgN[j].time
                                    };
                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            map
                                        );
                                    });
                                    //图表区
                                    this.addOrUpdateArrayItem(this.triggerSpeedData, {
                                        time: msgN[j].time,
                                        speed: newSpeed,
                                        originalSpeed: msgN[j].speed,
                                        avg: msgN[j].avg,
                                        max: msgN[j].max,
                                        med: msgN[j].med,
                                        min: msgN[j].min
                                    });
                                    this.$nextTick(() => {
                                        this.upDataListByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            this.triggerSpeedData
                                        );
                                    });
                                    //表格数据
                                    let carTou = {
                                        name: msgN[j].name,
                                        time: msgN[j].time,
                                        type: msgN[j].type,
                                        n_stay: msgN[j].n_stay,
                                        n_queue: msgN[j].n_queue,
                                        occ: msgN[j].occ,
                                        speed: newSpeed,
                                        originalSpeed: msgN[j].speed
                                    };
                                    this.$nextTick(() => {
                                        this.triggerDataCharts(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            carTou
                                        );
                                    });
                                    //之前错误逻辑，不知道为啥怎么处理
                                    // this.addOrUpdateArrayItem(this.tableData, {
                                    //     name: msgN[j].name,
                                    //     time: msgN[j].time,
                                    //     type: msgN[j].type,
                                    //     n_stay: msgN[j].n_stay,
                                    //     n_queue: msgN[j].n_queue,
                                    //     occ: msgN[j].occ,
                                    //     speed: newSpeed,
                                    //     originalSpeed: msgN[j].speed
                                    // });
                                } else if (msgN[j].component_type == '类型') {
                                    //console.log('实时触发-类型-', msgN[j].type_data);
                                    let map = {
                                        type_data: msgN[j].type_data,
                                        time: msgN[j].time
                                    };
                                    //卡片区
                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            map
                                        );
                                    });
                                    //图表区
                                    // this.triggerTypeData = msgN[j].type_data;
                                    this.triggerTypeData = [
                                        {
                                            type_data: msgN[j].type_data,
                                            time: msgN[j].time
                                        }
                                    ];
                                    // this.addOrUpdateArrayItem(this.triggerTypeData, {
                                    //     type_data: msgN[j].type_data,
                                    //      time: msgN[j].time,
                                    // });
                                    this.$nextTick(() => {
                                        this.upDataListByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            this.triggerTypeData
                                        );
                                    });
                                    //表格数据 类型有点特殊需要重新比对
                                    let carTou = {
                                        name: msgN[j].name,
                                        time: msgN[j].time,
                                        type: msgN[j].type,
                                        n_stay: msgN[j].n_stay,
                                        n_queue: msgN[j].n_queue,
                                        occ: msgN[j].occ,
                                        speed: newSpeed,
                                        originalSpeed: msgN[j].speed,
                                        type_data: msgN[j].type_data
                                    };
                                    this.$nextTick(() => {
                                        this.triggerDataCharts(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            msgN[j].type_data,
                                            msgN[j].time,
                                            carTou
                                        );
                                    });
                                    //之前错误逻辑，不知道为啥怎么处理
                                    // this.addOrUpdateArrayItem(this.tableData, {
                                    //     name: msgN[j].name,
                                    //     time: msgN[j].time,
                                    //     type: msgN[j].type,
                                    //     n_stay: msgN[j].n_stay,
                                    //     n_queue: msgN[j].n_queue,
                                    //     occ: msgN[j].occ,
                                    //     speed: newSpeed,
                                    //     originalSpeed: msgN[j].speed
                                    // });
                                } else if (msgN[j].component_type == '检测数') {
                                    let map = {
                                        n_stay: msgN[j].n_stay,
                                        time: msgN[j].time
                                    };
                                    //卡片区
                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            map
                                        );
                                    });
                                    //图表区
                                    this.addOrUpdateArrayItem(this.triggerNStayData, {
                                        time: msgN[j].time,
                                        n_stay: msgN[j].n_stay,
                                        avg: msgN[j].avg,
                                        max: msgN[j].max,
                                        med: msgN[j].med,
                                        min: msgN[j].min
                                    });
                                    this.$nextTick(() => {
                                        this.upDataListByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            this.triggerNStayData
                                        );
                                    });
                                    //表格数据
                                    let carTou = {
                                        name: msgN[j].name,
                                        time: msgN[j].time,
                                        type: msgN[j].type,
                                        n_stay: msgN[j].n_stay,
                                        n_queue: msgN[j].n_queue,
                                        occ: msgN[j].occ,
                                        speed: newSpeed,
                                        originalSpeed: msgN[j].speed
                                    };
                                    this.$nextTick(() => {
                                        this.triggerDataCharts(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            carTou
                                        );
                                    });
                                    //之前错误逻辑，不知道为啥怎么处理
                                    // this.addOrUpdateArrayItem(this.tableData, {
                                    //     name: msgN[j].name,
                                    //     time: msgN[j].time,
                                    //     type: msgN[j].type,
                                    //     n_stay: msgN[j].n_stay,
                                    //     n_queue: msgN[j].n_queue,
                                    //     occ: msgN[j].occ,
                                    //     speed: newSpeed,
                                    //     originalSpeed: msgN[j].speed
                                    // });
                                } else if (msgN[j].component_type == '排队数') {
                                    let map = {
                                        n_queue: msgN[j].n_queue,
                                        time: msgN[j].time
                                    };
                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            map
                                        );
                                    });
                                    //图表区
                                    this.addOrUpdateArrayItem(this.triggerNQueueData, {
                                        time: msgN[j].time,
                                        n_queue: msgN[j].n_queue
                                    });
                                    this.$nextTick(() => {
                                        this.upDataListByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            this.triggerNQueueData
                                        );
                                    });
                                    //表格数据
                                    let carTou = {
                                        name: msgN[j].name,
                                        time: msgN[j].time,
                                        type: msgN[j].type,
                                        n_stay: msgN[j].n_stay,
                                        n_queue: msgN[j].n_queue,
                                        occ: msgN[j].occ,
                                        speed: newSpeed,
                                        originalSpeed: msgN[j].speed
                                    };
                                    this.$nextTick(() => {
                                        this.triggerDataCharts(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            carTou
                                        );
                                    });
                                    //之前错误逻辑，不知道为啥怎么处理
                                    // this.addOrUpdateArrayItem(this.tableData, {
                                    //     name: msgN[j].name,
                                    //     time: msgN[j].time,
                                    //     type: msgN[j].type,
                                    //     n_stay: msgN[j].n_stay,
                                    //     n_queue: msgN[j].n_queue,
                                    //     occ: msgN[j].occ,
                                    //     speed: newSpeed,
                                    //     originalSpeed: msgN[j].speed
                                    // });
                                } else if (msgN[j].component_type == 'OD') {
                                    //图表区 - TODO 估计有未知问题
                                    this.addOrUpdateArrayItem(this.triggerODData, {
                                        ob_data: msgN[j].ob_data
                                    });
                                    this.$nextTick(() => {
                                        this.upDataListByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            this.triggerODData
                                        );
                                    });
                                }
                            }
                        } catch (error) {}
                        break;
                    case 'cycle_time-' + this.topicVideoIdList[i].videoId:
                        try {
                            //  //console.log("trigger_msgN",message)
                            const utf8decoder = new TextDecoder();
                            const u8arr = new Uint8Array(message);
                            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                            const msgN = JSON.parse(temp);
                            // console.log('固定时刻', msgN);
                            for (let j = 0; j < msgN.length; j++) {
                                const locations = this.findLocationById(this.intersectionList, msgN[j].component_id);
                                //处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
                                let newSpeed = '-';
                                if ((msgN[j].speed && msgN[j].speed != -1) || msgN[j].speed === 0) {
                                    newSpeed = Math.abs(msgN[j].speed);
                                }
                                if (msgN[j].component_type == '车头时距') {
                                    //图表区数组加表格数据
                                    let carTou = {
                                        name: msgN[j].name,
                                        time: msgN[j].time,
                                        type: msgN[j].type,
                                        n_stay: msgN[j].n_stay,
                                        n_queue: msgN[j].n_queue,
                                        occ: msgN[j].occ,
                                        speed: newSpeed,
                                        headway: msgN[j].headway,
                                        avg: msgN[j].avg,
                                        max: msgN[j].max,
                                        med: msgN[j].med,
                                        min: msgN[j].min,
                                        originalSpeed: msgN[j].speed
                                    };
                                    this.$nextTick(() => {
                                        this.timeDataCharts(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            carTou
                                        );
                                    });
                                    //卡片区
                                    let map = {
                                        headway: msgN[j].headway,
                                        time: msgN[j].time
                                    };
                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            map
                                        );
                                        //console.log(this.intersectionList, 'this.intersectionList');
                                    });
                                } else if (msgN[j].component_type == '速度') {
                                    //卡片区
                                    let map = {
                                        speed: msgN[j].speed,
                                        time: msgN[j].time
                                    };
                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            map
                                        );
                                    });
                                    //图表区
                                    let speedMap = {
                                        name: msgN[j].name,
                                        time: msgN[j].time,
                                        type: msgN[j].type,
                                        n_stay: msgN[j].n_stay,
                                        n_queue: msgN[j].n_queue,
                                        occ: msgN[j].occ,
                                        speed: newSpeed,
                                        headway: msgN[j].headway,
                                        avg: msgN[j].avg,
                                        max: msgN[j].max,
                                        med: msgN[j].med,
                                        min: msgN[j].min,
                                        originalSpeed: msgN[j].speed
                                    };
                                    this.$nextTick(() => {
                                        this.timeDataCharts(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            speedMap
                                        );
                                    });
                                } else if (msgN[j].component_type == '类型') {
                                    //卡片区
                                    let map = {
                                        type_data: msgN[j].type_data,
                                        time: msgN[j].time
                                    };
                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            map
                                        );
                                    });
                                    //图表区
                                    let table = {
                                        name: msgN[j].name,
                                        time: msgN[j].time,
                                        type: msgN[j].type,
                                        n_stay: msgN[j].n_stay,
                                        n_queue: msgN[j].n_queue,
                                        occ: msgN[j].occ,
                                        speed: newSpeed,
                                        type_data: msgN[j].type_data,
                                        headway: msgN[j].headway,
                                        avg: msgN[j].avg,
                                        max: msgN[j].max,
                                        med: msgN[j].med,
                                        min: msgN[j].min,
                                        originalSpeed: msgN[j].speed
                                    };
                                    this.$nextTick(() => {
                                        this.timeDataCharts(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            msgN[j].type_data,
                                            msgN[j].time,
                                            table
                                        );
                                    });
                                } else if (msgN[j].component_type == 'OD') {
                                    //图表区
                                    // this.addOrUpdateArrayItem(this.triggerODData, {
                                    //     ob_data: msgN[j].ob_data
                                    // });
                                    let table = {
                                        ob_data: msgN[j].ob_data
                                    };
                                    this.$nextTick(() => {
                                        this.timeDataCharts(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            table
                                        );
                                    });
                                }
                            }
                        } catch (error) {}
                        break;
                    case 'cycle_statistics-' + this.topicVideoIdList[i].videoId:
                        try {
                            //  //console.log("trigger_msgN",message)
                            const utf8decoder = new TextDecoder();
                            const u8arr = new Uint8Array(message);
                            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                            var detId = [];
                            const msgN = JSON.parse(temp);
                            //console.log('固定间隔', msgN, this.topicVideoIdList[i].videoId);
                            // this.cycleStatisticsData = msgN;
                            // console.log('固定间隔', msgN);
                            for (let j = 0; j < msgN.length; j++) {
                                //处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
                                let newSpeed = '-',
                                    aveHeadway = msgN[j].ave_headway;
                                if ((msgN[j].speed && msgN[j].speed != -1) || msgN[j].speed === 0) {
                                    newSpeed = Math.abs(msgN[j].speed);
                                }
                                if (msgN[j].ave_headway == -1) {
                                    aveHeadway = '-';
                                }
                                if (msgN[j].component_type == '车头时距') {
                                    // console.log('固定间隔-车头时距', sgN[j]);
                                    //图表区数组加表格数据
                                    let carTou = {
                                        name: msgN[j].name,
                                        time: msgN[j].time,
                                        type: msgN[j].type,
                                        in_flow: msgN[j].in_flow,
                                        out_flow: msgN[j].out_flow,
                                        ave_stay: msgN[j].ave_stay,
                                        ave_queue: msgN[j].ave_queue,
                                        ave_occ: msgN[j].ave_occ,
                                        ave_delay: msgN[j].ave_delay,
                                        speed: newSpeed,
                                        ave_headway: aveHeadway,
                                        avg: msgN[j].avg,
                                        max: msgN[j].max,
                                        med: msgN[j].med,
                                        min: msgN[j].min,
                                        occ: msgN[j].occ,
                                        originalSpeed: msgN[j].speed,
                                        gate_id: msgN[j].gate_id,
                                        interval: msgN[j].interval,
                                        flow: msgN[j].flow,
                                        in_spd: msgN[j].in_spd,
                                        out_spd: msgN[j].out_spd
                                    };
                                    this.$nextTick(() => {
                                        this.cycleStatisticsDataCharts(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            carTou
                                        );
                                    });
                                    //卡片区
                                    let map = {
                                        ave_headway: aveHeadway,
                                        time: msgN[j].time
                                    };
                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            map
                                        );
                                    });
                                } else if (msgN[j].component_type == '速度') {
                                    // console.log('固定间隔-速度', msgN[j].speed)
                                    //卡片区
                                    let map = {
                                        speed: msgN[j].speed,
                                        time: msgN[j].time
                                    };
                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            map
                                        );
                                    });
                                    //图表区
                                    let speedMap = {
                                        name: msgN[j].name,
                                        time: msgN[j].time,
                                        type: msgN[j].type,
                                        in_flow: msgN[j].in_flow,
                                        out_flow: msgN[j].out_flow,
                                        ave_stay: msgN[j].ave_stay,
                                        ave_queue: msgN[j].ave_queue,
                                        ave_occ: msgN[j].ave_occ,
                                        ave_delay: msgN[j].ave_delay,
                                        speed: newSpeed,
                                        ave_headway: aveHeadway,
                                        avg: msgN[j].avg,
                                        max: msgN[j].max,
                                        med: msgN[j].med,
                                        min: msgN[j].min,
                                        occ: msgN[j].occ,
                                        originalSpeed: msgN[j].speed,
                                        gate_id: msgN[j].gate_id,
                                        interval: msgN[j].interval,
                                        flow: msgN[j].flow,
                                        in_spd: msgN[j].in_spd,
                                        out_spd: msgN[j].out_spd
                                    };
                                    this.$nextTick(() => {
                                        this.cycleStatisticsDataCharts(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            speedMap
                                        );
                                    });
                                } else if (msgN[j].component_type == '类型') {
                                    // console.log('固定间隔-类型', JSON.stringify(msgN[j].type_data))
                                    // console.log('固定间隔-类型', JSON.stringify(msgN[j].time))
                                    //卡片区
                                    let map = {
                                        type_data: msgN[j].type_data,
                                        time: msgN[j].time
                                    };
                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            map
                                        );
                                    });
                                    //图表区
                                    let table = {
                                        name: msgN[j].name,
                                        time: msgN[j].time,
                                        type: msgN[j].type,
                                        in_flow: msgN[j].in_flow,
                                        out_flow: msgN[j].out_flow,
                                        ave_stay: msgN[j].ave_stay,
                                        ave_queue: msgN[j].ave_queue,
                                        ave_occ: msgN[j].ave_occ,
                                        ave_delay: msgN[j].ave_delay,
                                        speed: newSpeed,
                                        type_data: msgN[j].type_data,
                                        ave_headway: aveHeadway,
                                        avg: msgN[j].avg,
                                        max: msgN[j].max,
                                        med: msgN[j].med,
                                        min: msgN[j].min,
                                        occ: msgN[j].occ,
                                        originalSpeed: msgN[j].speed,
                                        gate_id: msgN[j].gate_id,
                                        interval: msgN[j].interval,
                                        flow: msgN[j].flow,
                                        in_spd: msgN[j].in_spd,
                                        out_spd: msgN[j].out_spd
                                    };
                                    this.$nextTick(() => {
                                        this.cycleStatisticsDataCharts(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            msgN[j].type_data,
                                            msgN[j].time,
                                            table
                                        );
                                    });
                                } else if (msgN[j].component_type == '流量') {
                                    //卡片区
                                    let flowMap = {
                                        inFlow: msgN[j].in_flow,
                                        outFlow: msgN[j].out_flow,
                                        time: msgN[j].time
                                    };
                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            flowMap
                                        );
                                    });
                                    //图表区
                                    let table = {
                                        name: msgN[j].name,
                                        time: msgN[j].time,
                                        type: msgN[j].type,
                                        in_flow: msgN[j].in_flow,
                                        out_flow: msgN[j].out_flow,
                                        ave_stay: msgN[j].ave_stay,
                                        ave_queue: msgN[j].ave_queue,
                                        ave_occ: msgN[j].ave_occ,
                                        ave_delay: msgN[j].ave_delay,
                                        speed: newSpeed,
                                        ave_headway: aveHeadway,
                                        avg: msgN[j].avg,
                                        max: msgN[j].max,
                                        med: msgN[j].med,
                                        min: msgN[j].min,
                                        occ: msgN[j].occ,
                                        originalSpeed: msgN[j].speed,
                                        gate_id: msgN[j].gate_id,
                                        interval: msgN[j].interval,
                                        flow: msgN[j].flow,
                                        in_spd: msgN[j].in_spd,
                                        out_spd: msgN[j].out_spd
                                    };
                                    this.$nextTick(() => {
                                        this.cycleStatisticsDataCharts(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            table
                                        );
                                    });
                                } else if (msgN[j].component_type == '检测数') {
                                    let map = {
                                        ave_stay: msgN[j].ave_stay,
                                        time: msgN[j].time
                                    };
                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            map
                                        );
                                    });
                                    //图表
                                    let table = {
                                        name: msgN[j].name,
                                        time: msgN[j].time,
                                        type: msgN[j].type,
                                        in_flow: msgN[j].in_flow,
                                        out_flow: msgN[j].out_flow,
                                        ave_stay: msgN[j].ave_stay,
                                        ave_queue: msgN[j].ave_queue,
                                        ave_occ: msgN[j].ave_occ,
                                        ave_delay: msgN[j].ave_delay,
                                        speed: newSpeed,
                                        ave_headway: aveHeadway,
                                        avg: msgN[j].avg,
                                        max: msgN[j].max,
                                        med: msgN[j].med,
                                        min: msgN[j].min,
                                        occ: msgN[j].occ,
                                        originalSpeed: msgN[j].speed,
                                        gate_id: msgN[j].gate_id,
                                        interval: msgN[j].interval,
                                        flow: msgN[j].flow,
                                        in_spd: msgN[j].in_spd,
                                        out_spd: msgN[j].out_spd
                                    };
                                    this.$nextTick(() => {
                                        this.cycleStatisticsDataCharts(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            table
                                        );
                                    });
                                } else if (msgN[j].component_type == '排队数') {
                                    let map = {
                                        ave_queue: msgN[j].ave_queue,
                                        time: msgN[j].time
                                    };
                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            map
                                        );
                                    });
                                    //图表
                                    let table = {
                                        name: msgN[j].name,
                                        time: msgN[j].time,
                                        type: msgN[j].type,
                                        in_flow: msgN[j].in_flow,
                                        out_flow: msgN[j].out_flow,
                                        ave_stay: msgN[j].ave_stay,
                                        ave_queue: msgN[j].ave_queue,
                                        ave_occ: msgN[j].ave_occ,
                                        ave_delay: msgN[j].ave_delay,
                                        speed: newSpeed,
                                        ave_headway: aveHeadway,
                                        avg: msgN[j].avg,
                                        max: msgN[j].max,
                                        med: msgN[j].med,
                                        min: msgN[j].min,
                                        occ: msgN[j].occ,
                                        originalSpeed: msgN[j].speed,
                                        gate_id: msgN[j].gate_id,
                                        interval: msgN[j].interval,
                                        flow: msgN[j].flow,
                                        in_spd: msgN[j].in_spd,
                                        out_spd: msgN[j].out_spd
                                    };
                                    this.$nextTick(() => {
                                        this.cycleStatisticsDataCharts(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            table
                                        );
                                    });
                                } else if (msgN[j].component_type == '延误') {
                                    // console.log('固定间隔-延误', msgN[j]);
                                    let map = {
                                        ave_delay: msgN[j].ave_delay,
                                        time: msgN[j].time
                                    };

                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            map
                                        );
                                    });
                                    //图表
                                    let table = {
                                        name: msgN[j].name,
                                        time: msgN[j].time,
                                        type: msgN[j].type,
                                        in_flow: msgN[j].in_flow,
                                        out_flow: msgN[j].out_flow,
                                        ave_stay: msgN[j].ave_stay,
                                        ave_queue: msgN[j].ave_queue,
                                        ave_occ: msgN[j].ave_occ,
                                        ave_delay: msgN[j].ave_delay,
                                        speed: newSpeed,
                                        ave_headway: aveHeadway,
                                        avg: msgN[j].avg,
                                        max: msgN[j].max,
                                        med: msgN[j].med,
                                        min: msgN[j].min,
                                        occ: msgN[j].occ,
                                        originalSpeed: msgN[j].speed,
                                        gate_id: msgN[j].gate_id,
                                        interval: msgN[j].interval,
                                        flow: msgN[j].flow,
                                        in_spd: msgN[j].in_spd,
                                        out_spd: msgN[j].out_spd
                                    };
                                    this.$nextTick(() => {
                                        this.cycleStatisticsDataCharts(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            table
                                        );
                                    });
                                } else if (msgN[j].component_type == 'OD') {
                                    //图表区
                                    // this.addOrUpdateArrayItem(this.triggerODData, {
                                    //     ob_data: msgN[j].ob_data
                                    // });
                                    // console.log('固定间隔-OD',  JSON.stringify(msgN[j]));
                                    let table = {
                                        ob_data: msgN[j].ob_data
                                    };
                                    this.$nextTick(() => {
                                        this.cycleStatisticsDataCharts(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            table
                                        );
                                    });
                                }
                            }
                        } catch (error) {}
                        break;
                    case 'cycle_accumulate-' + this.topicVideoIdList[i].videoId:
                        try {
                            //  //console.log("trigger_msgN",message)
                            const utf8decoder = new TextDecoder();
                            const u8arr = new Uint8Array(message);
                            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                            var detId = [];
                            const msgN = JSON.parse(temp);
                            //console.log('周期', msgN, this.topicVideoIdList[i].videoId);
                            // this.cycleStatisticsData = msgN;
                            for (let j = 0; j < msgN.length; j++) {
                                //处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
                                let newSpeed = '-',
                                    aveHeadway = msgN[j].ave_headway;
                                if ((msgN[j].speed && msgN[j].speed != -1) || msgN[j].speed === 0) {
                                    newSpeed = Math.abs(msgN[j].speed);
                                }
                                if (msgN[j].ave_headway == -1) {
                                    aveHeadway = '-';
                                }
                                if (msgN[j].component_type == '车头时距') {
                                    //卡片区
                                    let map = {
                                        ave_headway: aveHeadway,
                                        time: msgN[j].time
                                    };
                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            map
                                        );
                                    });
                                } else if (msgN[j].component_type == '速度') {
                                    //卡片区
                                    let map = {
                                        speed: msgN[j].speed,
                                        time: msgN[j].time
                                    };
                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            map
                                        );
                                    });
                                } else if (msgN[j].component_type == '类型') {
                                    //卡片区
                                    let map = {
                                        type_data: msgN[j].type_data,
                                        time: msgN[j].time
                                    };
                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            map
                                        );
                                    });
                                } else if (msgN[j].component_type == '流量') {
                                    //卡片区
                                    let flowMap = {
                                        inFlow: msgN[j].in_flow,
                                        outFlow: msgN[j].out_flow,
                                        time: msgN[j].time
                                    };
                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            flowMap
                                        );
                                    });
                                } else if (msgN[j].component_type == '检测数') {
                                    let map = {
                                        ave_stay: msgN[j].ave_stay,
                                        time: msgN[j].time
                                    };
                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            map
                                        );
                                    });
                                } else if (msgN[j].component_type == '排队数') {
                                    let map = {
                                        ave_queue: msgN[j].ave_queue,
                                        time: msgN[j].time
                                    };
                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            map
                                        );
                                    });
                                } else if (msgN[j].component_type == '延误') {
                                    let map = {
                                        ave_delay: msgN[j].ave_delay,
                                        time: msgN[j].time
                                    };

                                    this.$nextTick(() => {
                                        this.updateValueByVideoIdAndCommentId(
                                            this.intersectionList,
                                            this.topicVideoIdList[i].videoId,
                                            msgN[j].component_id,
                                            map
                                        );
                                    });
                                } else if (msgN[j].component_type == 'OD') {
                                }
                            }
                        } catch (error) {}
                        break;
                }
            }
        }
    },
    computed: {},
    // watch: {
    //     intersectionList: {
    //         handler: function (oldValues, newValues) {},
    //     }
    // },
    components: {
        chartsLine, //线型
        chartsPie, //饼图
        chartsBar, //柱状图
        MeanValue, //均值图
        thermalOD, //OD
        tableShow,
        regionTable
    }
};
</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;
            overflow-y: auto;
            .intersectionCardTitle {
                margin-top: 1%;
                width: 100%;
                height: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 17px;
                // position: absolute;
            }
            .boxList {
                height: 42%;
                width: 30%;
                margin-left: 2.5%;
                margin-top: 2.5%;
                /deep/ .el-card__header {
                    padding: 0;
                }

                .clearfix {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
                /deep/.el-card__body {
                    padding: 0;
                    .cardContent {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        .count {
                            height: 40px;
                            display: flex;
                            align-items: baseline;
                        }
                        .time {
                            font-size: 12px;
                            display: flex;
                            align-items: center;
                            flex-direction: column;
                        }
                    }
                }
            }
        }
    }
}
.cardChatPentar1 {
    width: 30%;
    height: 100%;
    .chantArea {
        width: 100%;
        height: 100%;
        .chartSection {
            width: 440px;
            height: 340px;
            background: rgba(71, 94, 115, 0.1);
            // margin-left: 1%;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            overflow: hidden;
            .buttonList {
                height: 17%;
                width: 100%;
                display: flex;
                align-items: center;
                overflow-x: auto;
                // margin-left: 3%;
                box-sizing: border-box;
                padding: 0 3%;
            }
            .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>
