<template>
    <div class="content-box" @contextmenu.prevent>
        <!-- <div class="container"> -->
        <div>
            <!-- <el-tabs type="border-card"  v-model="activeName" tab-position="left"> -->
            <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane :label="titName" name="first">
                    <div class="mapModuleApp">
                        <iframe
                            id="mapModule"
                            src="./VideoWeb/index.html"
                            frameborder="0"
                            style="width: 100%; height: 100%"
                            scrolling="no"
                            v-if="videoUnityShow"
                        ></iframe>
                        <!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none" ref="iframe"></iframe> -->
                        <el-empty :description="description" v-if="videoAnalysisShow"> </el-empty>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="数据看板" name="second">
                    <dataBoard
                        ref="dataBoardRef"
                        :cycleTimeData="cycleTimeData"
                        :activeName="activeName"
                        :triggerData="triggerData"
                        :triggerListData="triggerListData"
                        :cycleStatisticsData="cycleStatisticsData"
                        :cycleAccumulateData="cycleAccumulateData"
                        :cycleHistoryData="cycleHistoryData"
                    ></dataBoard>
                </el-tab-pane>
                <el-tab-pane label="分析配置" name="third">
                    <analysisConfiguration
                        :analysisConfigurationdata="analysisConfigurationdata"
                        :highPic="highPic"
                    ></analysisConfiguration>
                </el-tab-pane>
                <el-tab-pane label="分析状态" name="fourth">
                    <editModal
                        :trafficAnalysisStatusData="trafficAnalysisStatusData"
                        :targetAnalysisStatusData="targetAnalysisStatusData"
                    ></editModal>
                </el-tab-pane>
                <el-tab-pane label="存储" name="five">存储</el-tab-pane>
            </el-tabs>
            <!-- <el-button class="videoAnalysis" type="primary" size="mini" @click="videoAnalysisBtn" v-if="videoAnalysisShow" :disabled='disabledVideoAnalysis'
                >视频分析</el-button> -->
            <!-- <div class="progressNew" v-if="(this.$route.query.type == '离线视频' && videoAnalysisStatus=='分析中') || (this.$route.query.type == '离线视频' &&videoAnalysisStatus=='未分析')|| (this.$route.query.type == '离线视频' &&videoAnalysisStatus=='已分析')">
                <el-progress :percentage="numSatus"></el-progress>
            </div> -->
            <div class="progressNew" v-if="this.$route.query.type == '离线视频' && videoAnalysisStatusNew != '分析异常'">
                <el-progress :percentage="numSatus"></el-progress>

                <!-- <el-progress :percentage="numSatus"  :color="percentageColor"></el-progress> -->
            </div>
            <div class="progressNewV" v-if="this.$route.query.type == '离线视频' && videoAnalysisStatusNew == '分析异常'">
                <el-progress :percentage="numSatus"></el-progress>
                <!-- <el-progress :percentage="numSatus"  :color="percentageColor"></el-progress> -->
            </div>
            <el-button
                class="trafficAnalysis"
                type="primary"
                plain
                size="mini"
                @click="trafficAnalysisBtn"
                v-if="trafficAnalysisShow"
                :disabled="disabledTrafficAnalysis || disable"
                >交通分析</el-button
            >
        </div>
        <el-dialog
            title="检测器配置"
            class="new-dialog"
            :visible.sync="dialogFormVisible"
            direction="btt"
            custom-class="demo-drawer"
            :modal="false"
            :close-on-click-modal="false"
            :wrapperClosable="false"
            :with-header="false"
            width="35%"
            :before-close="closeDialog"
            center
            ref="dialog"
            v-draggable1
        >
            <!-- v-draggableDelection -->
            <div class="formBox">
                <el-form ref="form" :model="form" label-width="100px" :inline="true">
                    <el-form-item label="组件名称:" :required="true" @mousedown.prevent>
                        <el-input v-model="form.name"> </el-input>
                    </el-form-item>
                    <!-- <div class="titleDraggable" ></div> -->
                    <el-form-item label="检测器类型:">
                        <!-- <el-input v-model="form.type"></el-input> -->
                        <div>{{ form.type }}</div>
                    </el-form-item>
                    <el-form-item label="断面流向:" v-if="form.type == '断面'">
                        <el-select v-model="form.Direction" placeholder="请选择类型">
                            <el-option label="in" value="正向"></el-option>
                            <el-option label="out" value="反向"></el-option>
                            <el-option label="in+out" value="双向"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="筛选类型:" style="display: flex" label-width="150px">
                        <div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
                            <div style="text-align: center; font-weight: 700">行人/非机动车</div>
                            <el-checkbox-group v-model="typeCheckList">
                                <el-checkbox label="traffic police">交警</el-checkbox>
                                <el-checkbox label="sanitation worker">环卫工人</el-checkbox>
                                <el-checkbox label="general pedestrian">一般行人</el-checkbox>
                                <el-checkbox label="tricycle">三轮车</el-checkbox>
                                <el-checkbox label="bicycle">自行车</el-checkbox>
                                <el-checkbox label="electric bicycle">电瓶车</el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
                            <div style="text-align: center; font-weight: 700">机动车</div>
                            <el-checkbox-group v-model="typeCheckList">
                                <el-checkbox label="car">小汽车</el-checkbox>
                                <el-checkbox label="truck">卡车</el-checkbox>
                                <el-checkbox label="coach">大巴车</el-checkbox>
                                <el-checkbox label="bus">公交车</el-checkbox>
                                <el-checkbox label="special vehicle">特种车辆</el-checkbox>
                                <el-checkbox label="construction vehicle">建筑车辆</el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
                            <div style="text-align: center; font-weight: 700">事件</div>
                            <el-checkbox-group v-model="typeCheckList">
                                <el-checkbox label="fire">火灾</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </el-form-item>
                    <el-form-item label="感知编码:" style="display: flex">
                        <el-switch v-model="switchValue" @change="showPerception(switchValue)" :active-value="1" :inactive-value="0">
                        </el-switch>
                        <el-form v-model="perception" style="width: 100%; display: flex; flex-direction: column" v-if="switchValue == 1">
                            <el-form-item label="场景:">
                                <el-select v-model="perception.scene" placeholder="请选择" @change="sceneChange(perception.scene)">
                                    <el-option v-for="item in sceneOptions" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="方位:">
                                <el-select v-model="perception.position" placeholder="请选择">
                                    <el-option v-for="item in positionOption" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="位置:">
                                <el-select
                                    v-model="perception.place"
                                    placeholder="请选择"
                                    :disabled="perception.scene == '2' || perception.scene == '3'"
                                >
                                    <el-option v-for="item in placeOption" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="车道类型:">
                                <el-select v-model="perception.laneOrdinary" placeholder="请选择">
                                    <el-option v-for="item in laneOrdinaryOption" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="转向:">
                                <el-select v-model="perception.bearings" placeholder="请选择">
                                    <el-option v-for="item in bearingsOption" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="流向:">
                                <el-select v-model="perception.flowDirection" placeholder="请选择">
                                    <el-option v-for="item in flowDirection" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                                <!-- <el-select
                  v-model="form.Direction"
                  placeholder="请选择类型"
                  v-if="form.type == '断面'"
                >
                  <el-option label="in" value="正向"></el-option>
                  <el-option label="out" value="反向"></el-option>
                  <el-option label="in+out" value="双向"></el-option>
                </el-select> -->
                            </el-form-item>
                            <el-form-item label="车道编号:">
                                <el-select
                                    v-model="perception.laneNumber"
                                    placeholder="请选择"
                                    @change="laneNumbercChange(perception.laneNumber)"
                                >
                                    <el-option v-for="item in laneNumber" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                                至
                                <el-select v-model="perception.laneNumber1" placeholder="请选择" :disabled="perception.laneNumber == 0">
                                    <el-option
                                        v-for="item in laneNumber"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        v-if="item.value >= perception.laneNumber"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="顺序:" v-show="orderShow"> {{ order }} </el-form-item>
                        </el-form>
                    </el-form-item>
                    <!-- <el-form-item label="断面方向" v-if="form.type == '断面'">
            <el-select v-model="form.Direction" placeholder="请选择类型">
              <el-option label="正向" value="正向"></el-option>
              <el-option label="反向" value="反向"></el-option>
              <el-option label="双向" value="双向"></el-option>
            </el-select>
          </el-form-item> -->
                    <el-form-item style="width: 100%; text-align: center">
                        <el-button type="primary" @click="onSubmit(form)">确认</el-button>
                        <el-button @click="closeFigure(form)">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
        <!-- 组件弹框 -->
        <el-dialog
            class="componentDialog"
            width="35%"
            :title="componentTitle + '指标组件'"
            :visible.sync="component"
            :close-on-click-modal="false"
            @close="closeComponentForm(componentForm)"
            v-draggable1
        >
            <el-form ref="form" :model="componentForm" label-width="150px">
                <el-form-item label="名称：" :required="true">
                    <el-input v-model="componentForm.componentName"></el-input>
                </el-form-item>

                <el-form-item label="类型筛选：" v-if="componentForm.componentType == '类型'">
                    <!-- <el-checkbox-group v-model="componentForm.type" @change="handleTypeData">
            <el-checkbox v-for="item in typeData" :label="item" :key="item">{{
              item
            }}</el-checkbox>
          </el-checkbox-group> -->
                    <div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
                        <div style="text-align: center; font-weight: 700">行人/非机动车</div>
                        <el-checkbox-group v-model="componentForm.type" @change="handleTypeData">
                            <el-checkbox label="traffic police">交警</el-checkbox>
                            <el-checkbox label="sanitation worker">环卫工人</el-checkbox>
                            <el-checkbox label="general pedestrian">一般行人</el-checkbox>
                            <el-checkbox label="tricycle">三轮车</el-checkbox>
                            <el-checkbox label="bicycle">自行车</el-checkbox>
                            <el-checkbox label="electric bicycle">电瓶车</el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
                        <div style="text-align: center; font-weight: 700">机动车</div>
                        <el-checkbox-group v-model="componentForm.type" @change="handleTypeData">
                            <el-checkbox label="car">小汽车</el-checkbox>
                            <el-checkbox label="truck">卡车</el-checkbox>
                            <el-checkbox label="coach">大巴车</el-checkbox>
                            <el-checkbox label="bus">公交车</el-checkbox>
                            <el-checkbox label="special vehicle">特种车辆</el-checkbox>
                            <el-checkbox label="construction vehicle">建筑车辆</el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
                        <div style="text-align: center; font-weight: 700">事件</div>
                        <el-checkbox-group v-model="componentForm.type" @change="handleTypeData">
                            <el-checkbox label="fire">火灾</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-form-item>
                <el-form-item
                    label="数值筛选："
                    v-if="
                        componentForm.componentType != 'OD' &&
                        componentForm.componentType != '类型' &&
                        componentForm.componentType != '流量'
                    "
                >
                    <el-input-number v-model="componentForm.startValue" :min="0"></el-input-number>
                    <el-input-number v-model="componentForm.endValue" :min="9999" style="margin-left: 5%"></el-input-number>
                </el-form-item>
                <el-form-item label="流量类型：" v-if="componentForm.componentType == '流量'">
                    <el-radio-group v-model="componentForm.flowType">
                        <el-radio label="出流"></el-radio>
                        <el-radio label="入流"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="时间模式：">
                    <el-select v-model="componentForm.timeMode" placeholder="请选择时间模式">
                        <el-option
                            label="实时触发"
                            value="实时触发"
                            v-if="componentForm.componentType != '延误' && componentForm.componentType != '拥堵'"
                        ></el-option>
                        <el-option
                            label="固定时刻"
                            value="固定时刻"
                            v-if="
                                componentForm.componentType != '排队数' &&
                                componentForm.componentType != '检测数' &&
                                componentForm.componentType != '延误' &&
                                componentForm.componentType != '拥堵' &&
                                componentForm.componentType != '流量' &&
                                componentForm.componentType != '流量'
                            "
                        ></el-option>
                        <el-option label="固定间隔" value="固定间隔"> </el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="触发类型：" v-if="componentForm.timeModel=='touch'">
          <el-radio-group v-model="componentForm.touchType" >
            <el-radio label="实时（触发）"></el-radio>
            <el-radio label="间隔"></el-radio>
          </el-radio-group>
        </el-form-item> -->
                <el-form-item label="周期间隔：" required v-if="componentForm.timeMode != '实时触发'">
                    <!-- <el-slider v-model="componentForm.cycleInterval" show-input>
            </el-slider> -->
                    <div style="display: inline">
                        <el-select v-model="componentForm.company" placeholder="请选择单位" @change="changeCompany">
                            <!-- <el-option v-for="item in timeSelect" :key="item.value" :label="item.label" :value="item.value"></el-option> -->
                            <el-option
                                label="秒"
                                value="秒"
                                v-if="
                                    this.$route.query.type != '实时视频' ||
                                    componentForm.timeMode == '固定间隔' ||
                                    componentForm.timeMode == '固定时刻'
                                "
                            ></el-option>
                            <el-option label="分钟" value="分钟"></el-option>
                            <el-option
                                label="小时"
                                value="小时"
                                v-if="
                                    this.$route.query.type != '离线视频' ||
                                    (this.$route.query.type == '实时视频' && componentForm.timeMode == '固定间隔')
                                "
                            ></el-option>
                        </el-select>
                        <!-- <el-slider v-model="componentForm.cycleInterval" :max="max" :min="min"> </el-slider> -->
                        <el-slider v-model="componentForm.cycleInterval" :max="60" :min="5" v-if="componentForm.company == '秒'">
                        </el-slider>
                        <el-slider v-model="componentForm.cycleInterval" :max="60" :min="1" v-if="componentForm.company == '分钟'">
                        </el-slider>
                        <el-slider v-model="componentForm.cycleInterval" :max="24" :min="1" v-if="componentForm.company == '小时'">
                        </el-slider>
                    </div>
                </el-form-item>
                <el-form-item label="" v-if="componentForm.componentType == 'OD'">
                    <div style="color: red; line-height: normal">
                        注意：OD组件消耗性能较大，可能会造成分析延迟，请不要勾选太多选项!
                    </div>
                </el-form-item>
                <el-form-item label="起点：" :required="true" v-if="componentForm.componentType == 'OD'">
                    <el-checkbox-group v-model="componentForm.startSection" @change="handleCheckedStartSection">
                        <el-checkbox v-for="item in sectionals" :label="item.graphicName" :key="item.graphicId">{{
                            item.graphicName
                        }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="终点：" :required="true" v-if="componentForm.componentType == 'OD'">
                    <el-checkbox-group v-model="componentForm.endSection" @change="handleCheckedendSection">
                        <el-checkbox v-for="item in sectionals" :label="item.graphicName" :key="item.graphicId">{{
                            item.graphicName
                        }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="展现形式：" :required="true" v-if="componentForm.componentType != 'OD'">
                    <el-checkbox-group v-model="componentForm.presentation" @change="handlePresentation">
                        <el-checkbox label="数值" name="presentation"></el-checkbox>
                        <el-checkbox label="表格" name="presentation" v-if="componentForm.componentType != '拥堵'"></el-checkbox>
                        <el-checkbox label="时间曲线图" name="type"></el-checkbox>
                        <el-checkbox label="直方图" name="presentation" v-if="componentForm.componentType == '类型'"></el-checkbox>
                        <el-checkbox label="饼状图" name="presentation" v-if="componentForm.componentType == '类型'"></el-checkbox>
                        <!-- 速度、车头时距、排队数（固定间隔）、检测数（固定间隔） -->
                        <el-checkbox
                            label="均值图"
                            name="presentation"
                            v-if="
                                componentForm.componentType == '速度' ||
                                componentForm.componentType == '车头时距' ||
                                (componentForm.componentType == '排队数' && componentForm.timeMode == '固定间隔') ||
                                (componentForm.componentType == '检测数' && componentForm.timeMode == '固定间隔')
                            "
                        ></el-checkbox>
                    </el-checkbox-group>
                    <!-- <el-checkbox-group v-model="componentForm.presentation" @change="handlePresentation">
              <el-checkbox v-for="item in sectionals" :label="item.graphicName" :key="item.graphicId" >{{item.graphicName}}</el-checkbox>
            </el-checkbox-group> -->
                    <!-- <el-tag type="warning" ></el-tag> -->
                    <!-- <el-alert v-if="componentForm.componentType == '速度'"
                title="请至分析配置设置坐标转换"
                type="info"
                show-icon>
                </el-alert> -->
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmitComponent(componentForm)">确认</el-button>
                    <!-- 新增取消 -->
                    <el-button @click="closeComponent(componentForm)" v-if="closeComponentShow">取消</el-button>
                    <!-- 编辑取消 -->
                    <el-button @click="closeEdit(componentForm)" v-if="closeEditShow">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog
            title="接口组件"
            width="40%"
            :visible.sync="interfaceComponent"
            :close-on-click-modal="false"
            @close="closeComponentForm(interfaceForm)"
        >
            <el-form ref="form" :model="interfaceForm" label-width="150px">
                <el-form-item label="接入方：">
                    <!-- <el-select v-model="interfaceForm.interfaceValue" placeholder="请选择" @change="handleInterfaceOptions">
                        <el-option v-for="item in interfaceOptions" :key="item.accessPartyId" :label="item.accessPartyName" :value="item.accessPartyName"></el-option>
                    </el-select> -->
                    <el-checkbox-group v-model="interfaceForm.interfaceValue" @change="handleInterfaceOptions">
                        <el-checkbox v-for="item in interfaceOptions" :label="item.accessPartyName" :key="item.accessPartyId">{{
                            item.accessPartyName
                        }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmitInterface(interfaceForm)">确认</el-button>
                    <!-- 新增取消 -->
                    <el-button @click="closeComponent(interfaceForm)" v-if="closeComponentShow">取消</el-button>
                    <!-- 编辑取消 -->
                    <el-button @click="closeEdit(interfaceForm)" v-if="closeEditShow">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- </div> -->
    </div>
</template>

<script>
// import mqtt from "mqtt"; // mqtt协议
import moment from 'moment';
import _ from 'lodash';
import editModal from '@/views/bounced/maintenanceRemind';
import analysisConfiguration from '@/views/bounced/analysisConfiguration';
import dataBoard from '@/views/bounced/dataBoard';
import {
    getComponentData,
    getSectionalData,
    getVideoStatus,
    startTrafficAnalysis,
    startVideoAnalysis,
    getAnalysisData,
    getJianktxDetails
} from '../api/index';
import { getJierfData, getJierfDetails, getDeleteJierf, getConfigComponents, getConfigured, setComponents } from '@/api/interface';
import serverUrl from '../config/apiurl.js';
import axios from 'axios';
// mqtt
// import mqttHandle from "../../../utils/mqttHandle";
import mqttConfig from '@/utils/mqttConfig.js';
import draggable from '@/utils/draggable.js';
import draggableDelection from '@/utils/draggableDelection.js';
var mqtt; //mqtt 处理对象（全局变量）
var client;
// //判断
export default {
    data() {
        return {
            switchValue: 0, //打开感知编码
            orderShow: false, //顺序显示
            typeCheckList: [
                'traffic police',
                'sanitation worker',
                'general pedestrian',
                'tricycle',
                'bicycle',
                'electric bicycle',
                'car',
                'truck',
                'coach',
                'bus',
                'special vehicle',
                'construction vehicle',
                'fire'
            ], //类型复选框
            perception: {
                scene: '', //场景
                position: '', //方位
                place: '', //设置
                laneOrdinary: '', //车道类型
                bearings: '', //转向
                flowDirection: '', //流向
                laneNumber: '', //车道编号
                laneNumber1: '' //车道编号
            },
            order: '4', //顺序
            sceneOptions: [
                {
                    label: '交叉口',
                    value: '1'
                },
                {
                    label: '普通路段',
                    value: '2'
                },
                {
                    label: '高速公路路段',
                    value: '3'
                }
            ], //场景选项
            positionOption: [
                {
                    label: '东',
                    value: '1'
                },
                {
                    label: '西',
                    value: '2'
                },
                {
                    label: '南',
                    value: '3'
                },
                {
                    label: '北',
                    value: '4'
                },
                {
                    label: '东南',
                    value: '5'
                },
                {
                    label: '东北',
                    value: '6'
                },
                {
                    label: '西南',
                    value: '7'
                },
                {
                    label: '西北',
                    value: '8'
                },
                {
                    label: '其他',
                    value: '0'
                }
            ], //方位选项
            placeOption: [
                {
                    label: '进口',
                    value: '1'
                },
                {
                    label: '出口',
                    value: '2'
                },
                {
                    label: '路口内',
                    value: '3'
                },
                {
                    label: '其他',
                    value: '0'
                }
            ], //位置选项
            laneOrdinaryOption: [
                {
                    label: '普通机动车道',
                    value: '1'
                },
                {
                    label: '公交专用道',
                    value: '2'
                },
                {
                    label: '可变车道',
                    value: '3'
                },
                {
                    label: '非机动车道',
                    value: '4'
                },
                {
                    label: '路侧人行道',
                    value: '5'
                },
                {
                    label: '过街人行道',
                    value: '6'
                },
                {
                    label: '其他',
                    value: '0'
                }
            ], //车道类型选项
            bearingsOption: [
                {
                    label: '左转',
                    value: '01'
                },
                {
                    label: '直行',
                    value: '02'
                },
                {
                    label: '右转',
                    value: '03'
                },
                {
                    label: '掉头',
                    value: '04'
                },
                {
                    label: '直左',
                    value: '05'
                },
                {
                    label: '直右',
                    value: '06'
                },
                {
                    label: '左右',
                    value: '07'
                },
                {
                    label: '左转掉头',
                    value: '08'
                },
                {
                    label: '左直右',
                    value: '09'
                },
                {
                    label: '其他',
                    value: '00'
                }
            ], //转向代码
            flowDirection: [
                {
                    label: '其他',
                    value: '0'
                },
                {
                    label: '东向西',
                    value: '1'
                },
                {
                    label: '西向东',
                    value: '2'
                },
                {
                    label: '南向北',
                    value: '3'
                },
                {
                    label: '北向南',
                    value: '4'
                },
                {
                    label: '东西向',
                    value: '5'
                },
                {
                    label: '南北向',
                    value: '6'
                }
            ], //流向代码
            laneNumber: [
                {
                    label: '其他',
                    value: '0'
                },
                {
                    label: '1',
                    value: '1'
                },
                {
                    label: '2',
                    value: '2'
                },
                {
                    label: '3',
                    value: '3'
                },
                {
                    label: '4',
                    value: '4'
                },
                {
                    label: '5',
                    value: '5'
                },
                {
                    label: '6',
                    value: '6'
                },
                {
                    label: '7',
                    value: '7'
                },
                {
                    label: '8',
                    value: '8'
                },
                {
                    label: '9',
                    value: '9'
                }
            ], //车道编号
            trafficAnalysisStatusData: {}, //交通分析
            targetAnalysisStatusData: {}, //目标分析
            disable: false, //权限判断禁用
            percentageColor: 'blue',
            closeComponentShow: true,
            closeEditShow: false,
            max: '100',
            min: '1',
            receiveNews: '',
            interfaceOptions: [],
            interfaceComponent: false,
            topicSends: ['img0', 'stream0', 'trajectory0', 'detection0'],
            trajectory: false, //轨迹
            hideBoxShow: true, //隐藏箱子按钮显示隐藏
            closeStatus: null,
            modelOthers: false,
            componentShow: '',
            isShowBtn: true, //菜单按钮隐藏
            isShowBtn1: false, //菜单按钮显示
            inputVal: '',
            dialogFormVisible: false,
            areaComponent: false,
            indexModule: false,
            disabledTrafficAnalysis: true,
            disabledVideoAnalysis: false,
            //判断模拟区，画布区
            numberNew: 1,
            speed: false,
            component: false,
            sectionals: [],
            activeName: 'first',
            VideoId: '',
            title: '断面',
            componentTitle: '速度',
            form: {
                name: '',
                type: '',
                id: '',
                coordinate: '',
                Direction: '双向',
                StoppingSpeed: '5'
            },
            //初始图形名称
            startFigureName: '',
            areaComponentform: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '实时（触发）',
                desc: ''
            },

            timeSelect: [
                {
                    label: '秒',
                    value: '秒'
                },
                {
                    label: '分钟',
                    value: '分钟'
                },
                {
                    label: '小时',
                    value: '小时'
                }
            ],
            titName: '',
            componentForm: {
                //单位
                company: '',
                componentName: '',
                componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0',
                //周期间隔
                cycleInterval: 1,
                startSectionIds: '',
                startSectionNames: '',
                endSectionIds: '',
                endSectionNames: '',
                endValue: '',
                //展现形式
                presentationForm: '',
                presentation: [],
                startValue: '',
                timeMode: '',
                // type: ["机动车", "非机动车", "行人"],
                type: [],
                startSection: [],
                endSection: [],
                componentType: '',
                typeFiltering: '',
                typeData: [],
                flowType: '出流'
            },
            interfaceForm: {
                interfaceValue: ''
            },
            // typeData: ['小汽车', '公交车', '卡车', '非机动车', '行人'],
            typeData: ['机动车', '非机动车', '行人'],
            // typeData: [
            //   "traffic police",
            //   "sanitation worker",
            //   "general pedestrian",
            //   "tricycle",
            //   "bicycle",
            //   "electric bicycle",
            //   "car",
            //   "truck",
            //   "coach",
            //   "bus",
            //   "special vehicle",
            //   "construction vehicle",
            //   "fire",
            // ],
            //展现形式
            presentation: ['数值', '表格', '时间曲线图', '均值图'],
            trackForm: {
                name: ''
            },
            nowTime: '',
            ins: 0,
            btnPic: [],
            Data: [
                {
                    title: 'xx路口',
                    url: ''
                },
                {
                    title: '数据看板',
                    url: ''
                },
                {
                    title: '分析配置',
                    url: ''
                },
                {
                    title: '分析配置',
                    url: ''
                }
            ],
            messageInfo: [],
            orderList: [],
            enterList: [],
            stockInfo: [],
            perCent: 0,
            perCent1: 0,
            perCent2: 0,
            facToal: '',
            wbContent: '',
            //   wxContent:'',
            inContent: '',
            outContent: '',
            containerDetails: '',
            locdesc: '',
            weatherItem: {},
            loadingShow1: true,
            number: '',
            componentId: '',
            analysisConfigurationdata: {},
            //触发数据
            triggerData: [],
            triggerListData: [],
            //固定时刻
            cycleTimeData: [],
            //固定间隔
            cycleStatisticsData: [],
            //周期统计实时累计数据主题
            cycleAccumulateData: [],
            //历史数据
            cycleHistoryData: {},
            //视频类型
            videoType: '',
            videoAnalysisShow: false,
            trafficAnalysisShow: false,
            //控制unity展示
            videoUnityShow: true,
            videoAnalysisSta: '',
            analysis: {
                trafficAnalysisPath1: '',
                trafficAnalysisPath2: '',
                videoAnalysisPath: '',
                videoName: '',
                videoPath: '',
                videoTotalFrames: '',
                videoType: '实时视频',
                videoId: ''
            },
            description: '请等待排队',
            ipData: '',

            componentList: [],
            //离线视频加载进度
            numSatus: 0,
            //离线视频状态
            videoAnalysisStatusNew: '未分析',
            videoAnalysisStatusShow: true,
            vleNew: '',
            data1: '',
            data2: '',
            data3: '',
            roleStatus: '', //三维权限控制
            highPic: {}, //接收第一张高频图片
            highPicList: [], //存储高频图片
            timer1: null,
            timer2: null,
            timer3: null,
            timer4: null,
            imgMessagetimer: null,
            imgMessage: '',
            imgMessageNew: false
        };
    },

    //离开当前页面后执行
    destroyed: function () {
        ////console.log("离开当前页")
        //   client.publish('msg_stream',JSON.stringify({"msg_flag":-1}))
        //client.end();
    },
    created() {
        window.OnScene = this.OnSceneN;
        this.getAllSectionalData(this.$route.query.id);
        this.VideoId = this.$route.query.id;
        this.number = this.$route.query.num;
        this.titName = this.$route.query.name;
        window.getFigure = this.getFigureD;
        window.getModifyTheName = this.getModifyTheNameN;
        // window.getModifyTheName = this.getModifyTheNameN;
        window.getSingleComponentId = this.getSingleComponentIdN;
        window.getSimulationAreaEdit = this.getSimulationAreaEdit;
        window.getZhuanFaMQTT = this.getZhuanFaMQTT;
        window.delSuccess = this.delSuccess;
        window.getInterface = this.getInterface;
        window.AddMonqjktx_Error = this.AddMonqjktx_Error;
        if (this.$route.query.type == '实时视频') {
            this.videoAnalysisShow = false;
            this.trafficAnalysisShow = false;
            this.createMqtt();
        } else if (this.$route.query.type == '离线视频') {
            this.videoAnalysisShow = true;
            this.trafficAnalysisShow = true;
            this.getAnalysisStatus();
            this.createMqtt();
        }
    },
    mounted() {
        if (localStorage.getItem('roleName') == '系统管理员') {
            this.disable = false;
            this.roleStatus = 'true';
        } else {
            this.disable = true;
            this.roleStatus = 'false';
        }
        if (this.$route.query.type == '实时视频') {
            this.imgMessagetimer = setInterval(() => {
                this.setImgMessage();
            }, 200);
        }
    },

    methods: {
        //感知编码车道编号
        laneNumbercChange(val) {
            if (val == 0) {
                this.perception.laneNumber1 = '0';
            } else {
                this.perception.laneNumber1 = '';
            }
        },
        //感知编码开关事件
        showPerception(val) {
            // if (val == 1) {
            //     this.$message.warning('必须填写完整感知编码!');
            // }
            this.switchValue = val;
            this.perception.scene = ''; //场景
            this.perception.position = ''; //方位
            this.perception.place = ''; //设置
            this.perception.laneOrdinary = ''; //车道类型
            this.perception.bearings = ''; //转向
            this.perception.flowDirection = ''; //流向
            this.perception.laneNumber = ''; //车道编号
            this.perception.laneNumber1 = ''; //车道编号
        },
        //场景选择
        sceneChange(val) {
            //console.log(val, '车道场景选择');
            if (val != 1) {
                this.perception.place = '0';
            }
            if (val == 3) {
                this.laneOrdinaryOption = [
                    {
                        label: '主线车道',
                        value: '1'
                    },
                    {
                        label: '入口匝道',
                        value: '2'
                    },
                    {
                        label: '出口匝道',
                        value: '3'
                    },
                    {
                        label: '应急车道',
                        value: '4'
                    },
                    {
                        label: '其他',
                        value: '0'
                    }
                ];
            } else {
                this.laneOrdinaryOption = [
                    {
                        label: '普通机动车道',
                        value: '1'
                    },
                    {
                        label: '公交专用道',
                        value: '2'
                    },
                    {
                        label: '可变车道',
                        value: '3'
                    },
                    {
                        label: '非机动车道',
                        value: '4'
                    },
                    {
                        label: '路侧人行道',
                        value: '5'
                    },
                    {
                        label: '过街人行道',
                        value: '6'
                    },
                    {
                        label: '其他',
                        value: '0'
                    }
                ];
            }
        },
        // 数据看板的标签点击
        handleClick: function (tab, event) {
            // console.log(tab)
            if (tab.name == 'first') {
                if (this.$route.query.type == '实时视频') {
                    //实时视频页面需要订阅的主题
                    this.videoTopicSends();
                }
            } else if (tab.name == 'second') {
                this.$nextTick(() => {
                    if (this.$route.query.type == '离线视频') {
                        this.$refs.dataBoardRef.getNew(this.getHistory);
                    } else {
                        //数据看板需要订阅的主题
                        this.dataBoardTopicSends();
                        this.$refs.dataBoardRef.getNew();
                    }
                });
            }
        },
        AddMonqjktx_Error(data) {
            this.$message({
                message: data,
                type: 'warning'
            });
        },
        /** 创建mqtt */
        createMqtt() {
            //创建链接，接收数据
            if (this.$route.query.type == '离线视频') {
                this.topicSends = [
                    // 'stream' + this.number,
                    // 'trajectory' + this.number,
                    // 'detection' + this.number,
                    'trigger-' + this.$route.query.id,
                    'cycle_history-' + this.$route.query.id,
                    'cycle_time-' + this.$route.query.id,
                    'cycle_statistics-' + this.$route.query.id,
                    'cycle_accumulate-' + this.$route.query.id,
                    //获取离线视频数据
                    'VideoStatusData',
                    'TargetAnalysisStatusData',
                    'TrafficAnalysisStatusData'
                    //目标数量
                    // 'simulator_target-' + this.$route.query.id
                ];
                window.PubScribe(this.topicSends, '001', this.realInfo);
                this.timer1 = null;
                // this.timer1 = setTimeout(() => {
                //     this.getHistory();
                // }, 5000);
            } else if (this.$route.query.type == '实时视频') {
                // this.topicSends = [
                //     'stream' + this.number,
                //     'trajectory' + this.number,
                //     'detection' + this.number,
                //     'trigger-' + this.$route.query.id,
                //     'cycle_time-' + this.$route.query.id,
                //     'cycle_statistics-' + this.$route.query.id,
                //     'cycle_accumulate-' + this.$route.query.id,
                //     'TargetAnalysisStatusData',
                //     'TrafficAnalysisStatusData',
                //     'img' + this.number
                //     // 'hert',
                //     // 'img0',
                //     // 'img1',
                //     // 'img2',
                //     // 'img3',
                //     // 'img4',
                //     // 'img5',
                //     // 'img6',
                //     // 'img7',
                //     // 'Contorl_server'
                //     //目标数量
                //     // 'simulator_target-' + this.$route.query.id
                // ];
                // // console.log('在test1/index视频页面number-',this.number)
                // window.PubScribe(this.topicSends, this.number, this.realInfo, false, this.$route.query.id);
                //视频页面需要订阅的主题有 img，stream，trajectory，detection，TargetAnalysisStatusDataTraffic，AnalysisStatusData
                //数据看板需要订阅的主题有 trigger，cycle_time，，cycle_statistics，cycle_accumulate
                this.videoTopicSends();
            }
            this.timer2 = null;
            this.timer2 = setTimeout(() => {
                window.publish('Custom', JSON.stringify({ type: 'getImage', videoid: this.$route.query.id }));
            }, 5000);
        },
        //实时视频页面需要订阅的主题
        videoTopicSends() {
            this.topicSends = [
                'stream' + this.number,
                'trajectory' + this.number,
                'detection' + this.number,
                'img' + this.number,
                'TargetAnalysisStatusData',
                'TrafficAnalysisStatusData'
            ];
            // console.log('在test1/index视频页面number-',this.number)
            window.PubScribe(this.topicSends, this.number, this.realInfo, false, this.$route.query.id);
        },
        //数据看板需要订阅的主题
        dataBoardTopicSends() {
            this.topicSends = [
                'stream' + this.number,
                'trajectory' + this.number,
                'detection' + this.number,
                'TargetAnalysisStatusData',
                'TrafficAnalysisStatusData',
                'trigger-' + this.$route.query.id,
                'cycle_time-' + this.$route.query.id,
                'cycle_statistics-' + this.$route.query.id,
                'cycle_accumulate-' + this.$route.query.id
            ];
            // console.log('在test1/index视频页面number-',this.number)
            window.PubScribe(this.topicSends, this.number, this.realInfo, false, this.$route.query.id);
        },
        //获取视频分析，交通分析状态数据
        getAnalysisStatus() {
            getVideoStatus(this.$route.query.id).then((res) => {
                //console.log('res.data', res.data);
                //视频分析状态
                if (res.data.data.videoAnalysisStatus == '未分析') {
                    this.disabledTrafficAnalysis = true;
                    this.videoUnityShow = false;
                    this.analysisData();
                } else if (res.data.data.videoAnalysisStatus == '分析中') {
                    this.disabledVideoAnalysis = true;
                    this.videoUnityShow = false;
                    this.timer3 = null;
                    this.timer3 = setTimeout(() => {
                        this.getAnalysisStatus();
                    }, 5000);
                } else if (res.data.data.videoAnalysisStatus == '已分析') {
                    this.videoUnityShow = true;
                    this.videoAnalysisSta = res.data.data.videoAnalysisStatus;
                    this.disabledTrafficAnalysis = false;
                    this.analysisData();
                    //交通分析状态
                } else if (res.data.data.videoAnalysisStatus == '分析异常') {
                    // this.videoUnityShow = true;
                    // this.videoAnalysisSta = res.data.data.videoAnalysisStatus;
                    // this.disabledTrafficAnalysis = false;
                    this.videoAnalysisStatusNew = '分析异常';
                    // this.percentageColor = 'red'
                    this.analysisData();
                    //交通分析状态
                } else if (res.data.data.trafficAnalysisStatus == '未分析') {
                    this.disabledVideoAnalysis = true;
                } else if (res.data.data.trafficAnalysisStatus == '分析中') {
                    this.disabledVideoAnalysis = true;
                    this.disabledTrafficAnalysis = true;
                } else if (res.data.data.videoAnalysisStatus == '已分析' || res.data.data.trafficAnalysisStatus == '已分析') {
                    this.disabledVideoAnalysis = false;
                    this.disabledTrafficAnalysis = true;
                }
            });
        },
        getInterface(data1, data2, data3) {
            //console.log('data1', data1); //接口组件id
            //console.log('data2', data2); //组件id
            //console.log('data3', data2); //类型
            this.data1 = data1;
            this.data2 = data2;
            this.data3 = data3;
            this.interfaceComponent = true;
            this.getJierf();
        },
        //获取接入方
        getJierf() {
            getJierfData()
                .then((res) => {
                    this.interfaceOptions = res.data.data;
                    //console.log('this.interfaceOptions', this.interfaceOptions);
                })
                .catch((err) => {
                    _this.$message.error(err.msg);
                });
        },
        handleInterfaceOptions(val) {
            //console.log('val', val);
            var startSectionIdArr = [];
            var startSectionNameArr = [];
            val.forEach((item) => {
                this.sectionals.forEach((items) => {
                    if (item == items.accessPartyName) {
                        startSectionIdArr.push(items.accessPartyId);
                        startSectionNameArr.push(items.accessPartyName);
                        let newStartSectionId = startSectionIdArr.join(',');
                        // let newStartSectionName = startSectionNameArr.join(',');
                        this.interfaceForm.interfaceValue = newStartSectionId;
                        // this.componentForm.startSectionNames = newStartSectionName;
                    }
                });
            });
            // this.interfaceForm.interfaceValue = val
        },
        onSubmitInterface() {
            let params = {
                accessPartyId: this.data1,
                componentIds: this.data1,
                componentIds: this.data1,
                componentIds: this.data1
            };
            axios({
                method: 'post',
                url: serverUrl.setAccessParty,
                data: params
            }).then((res) => {
                if (res.data.code == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.interfaceComponent = false;
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                    this.interfaceComponent = false;
                }
            });
        },
        //获取离线视频固定时刻固定间隔
        getHistory() {
            console.log('执行获取离线视频固定时刻固定间隔主题');
            window.publish('GetCycleHistory', 'Get-' + this.$route.query.id);
        },
        getZhuanFaMQTT(topic, msg) {
            // //console.log("topic",topic)
            // //console.log("msg",msg)
            window.publish(topic, msg);
        },
        //分析视频按钮
        videoAnalysisBtn() {
            startVideoAnalysis(this.$route.query.id).then((res) => {
                //
                if (res.data.msg == '请求成功') {
                    this.$message({
                        message: '启动成功',
                        type: 'success'
                    });
                    this.timer4 = null;
                    this.timer4 = setTimeout(() => {
                        this.getAnalysisStatus();
                    }, 5000);
                    // if(this.videoAnalysisSta=='已分析'){

                    // }else if(this.videoAnalysisSta=='分析中'){
                    //     this.description = '正在分析中'
                    //     setTimeout(() => {
                    //     this.getAnalysisStatus()
                    //     }, 5000);
                    // }else if(this.videoAnalysisSta=='未分析'){
                    // }
                }
            });
        },
        //交通分析
        trafficAnalysisBtn() {
            startTrafficAnalysis(this.$route.query.id).then((res) => {
                //
                //console.log('res.data', res.data.data);
                if (res.data.code == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.analysisData();
                    //    this.getAnalysisStatus()
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            });
        },
        //转64位
        imageUrlToBase64(img) {
            //一定要设置为let，不然图片不显示
            let image = new Image();
            let dataURL = '';
            //解决跨域问题
            image.setAttribute('crossOrigin', 'anonymous');
            let imageUrl = img;
            image.src = imageUrl;
            //image.onload为异步加载
            image.onload = () => {
                let canvas = document.createElement('canvas');
                canvas.width = image.width;
                canvas.height = image.height;
                let context = canvas.getContext('2d');
                context.drawImage(image, 0, 0, image.width, image.height);
                let quality = 0.8;
                //这里的dataurl就是base64类型
                dataURL = canvas.toDataURL('image/jpeg', quality); //使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！
                let noPrefix = dataURL.replace(/^data:image\/\w+;base64,/, '');
                var msgNew = {
                    id: this.$route.query.id,
                    pic: noPrefix,
                    rate: 'low'
                };
                this.analysisConfigurationdata = msgNew;
                var vleNe = {
                    id: this.$route.query.id,
                    pic: noPrefix,
                    rate: 'high'
                };
                this.vleNew = vleNe;
            };
        },
        //获取视频分析结果
        analysisData() {
            var ip = window.location.host.split(':')[0];
            if (process.env.NODE_ENV === 'development') {
                ip = '172.16.1.168';
            }
            // var ip = '172.16.1.168'; //http://172.16.1.168
            //console.log('ip', ip);
            getAnalysisData(this.$route.query.id, ip).then((res) => {
                //console.log('res.data.data视频分析结果', res.data.data);
                // if(res.data.data.TrafficAnalysisStatus=='分析异常'){
                //     this.videoAnalysisStatus = '分析异常'
                // }else {
                //console.log('this.videoAnalysisStatusNew', res.data.data.trafficAnalysisStatus);
                this.videoAnalysisStatusNew = res.data.data.trafficAnalysisStatus;
                //console.log('this.videoAnalysisStatusNew', this.videoAnalysisStatusNew);
                var numSatusNew = '';
                this.analysis.videoTotalFrames = Number(res.data.data.videoTotalFrames);
                if (res.data.data.trafficFrameNumber == '') {
                    this.analysis.trafficFrameNumber = 0;
                } else {
                    this.analysis.trafficFrameNumber = Number(res.data.data.trafficFrameNumber);
                }
                numSatusNew = (this.analysis.trafficFrameNumber / this.analysis.videoTotalFrames) * 100;
                this.numSatus = parseFloat(numSatusNew.toFixed(2));
                if (this.numSatus == 100) {
                    this.videoAnalysisStatusShow = false;
                }

                // }
                this.analysis.trafficAnalysisPath1 = res.data.data.trafficAnalysisPath1;
                this.analysis.trafficAnalysisPath2 = res.data.data.trafficAnalysisPath2;
                this.analysis.videoAnalysisPath = res.data.data.videoAnalysisPath;
                this.analysis.videoName = res.data.data.videoName;
                this.analysis.videoPath = res.data.data.videoPath;
                this.analysis.videoId = this.$route.query.id;
                this.analysis.videoType = this.$route.query.type;
                this.imageUrlToBase64(res.data.data.picPath);
            });
            //  this.OnSceneN()
            //console.log(this.analysis, ' this.analysis');
        },

        //分析结束传参
        postTraffic() {
            var ip = window.location.host.split(':')[0];
            if (process.env.NODE_ENV === 'development') {
                ip = '172.16.1.168';
            }
            // var ip = '172.16.1.168'; //http://172.16.1.168:5000
            //console.log('ip', ip);
            getAnalysisData(this.$route.query.id, ip).then((res) => {
                //console.log('res.data.data', res.data.data);
                this.analysis.trafficAnalysisPath1 = res.data.data.trafficAnalysisPath1;
                this.analysis.trafficAnalysisPath2 = res.data.data.trafficAnalysisPath2;
                document
                    .getElementById('mapModule')
                    .contentWindow.addColor(this.analysis.trafficAnalysisPath1, this.analysis.trafficAnalysisPath2);
            });
        },
        //停止订阅mqtt
        disConnect() {
            /*if (client != null) {
        client.unsubscribe(this.topicSends);
        client = null;
      }*/
        },
        /** 实时数据分类 */
        realInfo(topic, message) {
            let mapModuleDom = document.getElementById('mapModule');
            const utf8decoder = new TextDecoder();
            switch (topic) {
                // 接收托片
                case 'img' + this.number:
                    // console.log('msg接受一张高频图片', moment().format('YYYY-MM-DD HH:mm:ss'));
                    this.imgMessage = message;
                    this.imgMessageNew = true;
                    // try {
                    //     const u8arr = new Uint8Array(message);
                    //     const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                    //     const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
                    //     // document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
                    //     if (msg.rate == 'high') {
                    //         // console.log('Web收到图片：img' + this.number, moment().format('YYYY-MM-DD HH:mm:ss'));
                    //         mapModuleDom.contentWindow.getDestination(JSON.stringify(msg));
                    //         //接受一张高频图片
                    //         if (JSON.stringify(this.highPic) === '{}') {
                    //             this.highPic = msg;
                    //             // sessionStorage.setItem("highPic", this.highPic.pic);
                    //             // sessionStorage.setItem("videoId", this.highPic.id);
                    //         }
                    //         //更新本地视频图片，给视频列表页面展示
                    //         this.storageHighPicList(msg);
                    //     } else if (msg.rate == 'low') {
                    //         this.analysisConfigurationdata = msg;
                    //     }
                    // } catch (error) {
                    //     // console.log('imgError',error)
                    // }
                    break;
                // 树结构
                case 'stream' + this.number:
                    try {
                        const u8arr = new Uint8Array(message);
                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                        const msg = JSON.parse(temp);
                        // console.log('stream' + this.number, msg);
                        // console.log('Web收到：stream' + this.number, moment().format('YYYY-MM-DD HH:mm:ss'));
                        mapModuleDom.contentWindow.getData(JSON.stringify(msg));
                    } catch (error) {}
                    break;
                // 控制台输出
                case 'trajectory' + this.number:
                    try {
                        const u8arr = new Uint8Array(message);
                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                        const msg = JSON.parse(temp);
                        mapModuleDom.contentWindow.getGuiJi(JSON.stringify(msg));
                    } catch (error) {}
                    break;
                // 实时触发
                case 'detection' + this.number:
                    try {
                        const u8arr = new Uint8Array(message);
                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                        var detId = [];
                        const msgN = JSON.parse(temp);
                        //   //console.log("msgN",msgN)
                        this.triggerData = msgN;
                        if (temp.length != 0) {
                            for (let i = 0; i < msgN.length; i++) {
                                if (msgN[i].event != 'empty') {
                                    // detId.push(msgN[i].det_id);
                                    detId.push(msgN[i]);
                                }
                            }
                            mapModuleDom.contentWindow.getChuFa(JSON.stringify(detId));
                        }
                    } catch (error) {}
                    break;
                case 'trigger-' + this.$route.query.id:
                    try {
                        //  //console.log("trigger_msgN",message)
                        const u8arr = new Uint8Array(message);
                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                        var detId = [];
                        const msgN = JSON.parse(temp);
                        // console.log('实时触发trigger-', msgN[0].time,'-',msgN[0].frame);
                        // console.log("trigger_msgN",msgN)
                        // msgN.forEach(item => {
                        //     //console.log("item.name",item.name)
                        // })
                        // for (const item of msgN) {
                        //     if (item.component_name == 'OD_0') {
                        //         console.log('源头实时触发trigger-', item);
                        //     }
                        // }
                        this.triggerListData = msgN;
                    } catch (error) {}
                    break;
                case 'cycle_time-' + this.$route.query.id:
                    try {
                        //  //console.log("trigger_msgN",message)
                        const u8arr = new Uint8Array(message);
                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                        var detId = [];
                        const msgN = JSON.parse(temp);
                        // console.log('固定时刻', msgN);
                        this.cycleTimeData = msgN;
                    } catch (error) {}
                    break;
                case 'cycle_history-' + this.$route.query.id:
                    try {
                        //  //console.log("trigger_msgN",message)
                        const u8arr = new Uint8Array(message);
                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                        var detId = [];
                        const msgN = JSON.parse(temp);
                        // console.log('历史数据源头', msgN);
                        this.cycleHistoryData = msgN;
                    } catch (error) {}
                    break;
                case 'cycle_statistics-' + this.$route.query.id:
                    try {
                        //  //console.log("trigger_msgN",message)
                        const u8arr = new Uint8Array(message);
                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                        var detId = [];
                        const msgN = JSON.parse(temp);
                        //  console.log("cycle_statistics-固定间隔",temp)
                        // for (const item of msgN) {
                        //     if (item.component_name == 'OD_0') {
                        //         console.log('源头固定间隔cycle_statistics-', item);
                        //     }
                        // }
                        this.cycleStatisticsData = msgN;
                    } catch (error) {}
                    break;
                case 'cycle_accumulate-' + this.$route.query.id:
                    try {
                        //周期统计实时累计数据主题
                        //  console.log("trigger_msgN",message)
                        const u8arr = new Uint8Array(message);
                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                        var detId = [];
                        const msgN = JSON.parse(temp);
                        // console.log('cycle_accumulate-周期统计实时累计数据主题', msgN);
                        // for (const t of msgN) {
                        //     console.log(JSON.stringify(t.type_data))
                        // }
                        this.cycleAccumulateData = msgN;
                    } catch (error) {}
                    break;
                case 'VideoStatusData':
                    try {
                        const u8arr = new Uint8Array(message);
                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                        const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
                        //   //console.log("VideoStatusData", msg)   //msg为转换后的JSON数据
                        this.changeStatus(msg);
                    } catch (error) {}
                    break;
                case 'TargetAnalysisStatusData': //目标监测
                    try {
                        const u8arr = new Uint8Array(message);
                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                        const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
                        //console.log(msg, '目标监测');
                        this.targetAnalysisStatusData = msg;
                    } catch (error) {}
                    break;
                case 'TrafficAnalysisStatusData': //交通分析
                    try {
                        const u8arr = new Uint8Array(message);
                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                        const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
                        //console.log(msg, '交通分析');
                        this.trafficAnalysisStatusData = msg;
                    } catch (error) {}
                    break;
                case 'simulator_target-' + this.$route.query.id: //目标数量
                    try {
                        const u8arr = new Uint8Array(message);
                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                        const msg = JSON.parse(temp);
                        //console.log('simulator_target-目标数量', msg);
                        mapModuleDom.contentWindow.getTargetNumber(JSON.stringify(msg));
                    } catch (error) {}
                    break;
            }
            // this.receiveNews = '';
        },
        setImgMessage() {
            if (this.imgMessage && this.imgMessageNew) {
                // console.log('执行了setImgMessage');
                this.imgMessageNew = false;
                let mapModuleDom = document.getElementById('mapModule');
                const utf8decoder = new TextDecoder();
                const u8arr = new Uint8Array(this.imgMessage);
                const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
                // document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
                if (msg.rate == 'high') {
                    // console.log('Web收到图片：img' + this.number, moment().format('YYYY-MM-DD HH:mm:ss'));
                    mapModuleDom.contentWindow.getDestination(JSON.stringify(msg));
                    //接受一张高频图片
                    if (JSON.stringify(this.highPic) === '{}') {
                        this.highPic = msg;
                        // sessionStorage.setItem("highPic", this.highPic.pic);
                        // sessionStorage.setItem("videoId", this.highPic.id);
                    }
                    //更新本地视频图片，给视频列表页面展示
                    this.storageHighPicList(_.cloneDeep(msg));
                } else if (msg.rate == 'low') {
                    this.analysisConfigurationdata = msg;
                }
            }
        },
        storageHighPicList(msg) {
            let highPicList = sessionStorage.getItem('highPicList') ? JSON.parse(sessionStorage.getItem('highPicList')) : [];
            if (highPicList.length == 0) {
                highPicList.push({ pic: msg.pic, videoId: msg.id });
            } else {
                let found = false;
                for (let i = 0; i < highPicList.length; i++) {
                    if (highPicList[i].videoId == msg.id) {
                        highPicList[i].pic = msg.pic;
                        found = true;
                        break; // 找到了就退出循环
                    }
                }
                if (!found) {
                    highPicList.push({ pic: msg.pic, videoId: msg.id });
                }
            }
            sessionStorage.setItem('highPicList', JSON.stringify(highPicList));
        },
        changeCompany(val) {
            //console.log('val', val);
            if (val == '小时') {
                this.max = '24';
                this.componentForm.cycleInterval = 1;
            } else if (val == '分钟') {
                this.max = '60';
                this.componentForm.cycleInterval = 1;
            } else if (val == '秒') {
                this.max = '60';
                this.componentForm.cycleInterval = 5;
            }
        },
        changeStatus(msg) {
            //分析中
            if (msg.type == 'traffic_under_analysis' && msg.video_id == this.$route.query.id) {
                this.videoAnalysisStatus = '分析中';
                var numSatusN = '';
                // loadingcard.close();
                numSatusN = (msg.number_frames / msg.total_frames) * 100;
                this.numSatus = parseFloat(numSatusN.toFixed(2));
            } else if (msg.type == 'traffic_analyzed' && msg.video_id == this.$route.query.id) {
                this.videoAnalysisStatus = '已分析';
                this.numSatus = 100;
                //已分析
                //console.log('已分析');
                this.postTraffic();
            } else if (msg.type == 'traffic_analyse_unusual' && msg.video_id == this.$route.query.id) {
                //分析异常
                //console.log('分析异常');
                this.videoAnalysisStatus = '分析异常';
            }
        },
        //初始化unity
        OnSceneN() {
            var ip = window.location.host;
            // this.ipData = 'http://' + ip.split(':')[0] + ':5000';
            this.ipData = 'http://' + ip.split(':')[0];
            if (process.env.NODE_ENV === 'development') {
                this.ipData = 'http://172.16.1.168';
            }
            document.getElementById('mapModule').contentWindow.getIpData(this.ipData);
            // document.getElementById('mapModule').contentWindow.getIpData('http://172.16.1.168');
            if (this.$route.query.type == '离线视频') {
                document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));
                document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(this.vleNew));
            }
            document
                .getElementById('mapModule')
                .contentWindow.postVideoId(JSON.stringify(this.$route.query.id + ',' + this.$route.query.type));
            document.getElementById('mapModule').contentWindow.getRoleStatus(this.roleStatus);
        },
        //删除图形成功获取数据
        delSuccess() {
            if (this.$route.query.type == '离线视频') {
                this.$message({
                    type: 'warning',
                    message: '请点击交通分析，获取最新数据！',
                    showClose: true,
                    duration: 0
                });
            }
        },
        // //新增组件根据组件id获取单个组件数据
        getSingleComponentIdN(id, type, name) {
            //console.log('id', id);
            //console.log('type', type);
            //console.log('name', name);
            this.closeEditShow = false;
            this.closeComponentShow = true;
            this.componentId = id;
            this.componentForm.componentType = type;
            this.componentTitle = type;
            getComponentData({ AnalogAreaComponentId: id }).then(async(res) => {
                //console.log('res', res);
                if (res.data.code == 200) {
                    //console.log('res', res.data.data);
                    this.component = true;
                    if (res.data.data.company != '') {
                        this.componentForm.company = res.data.data.company;
                    }
                    // this.componentForm.componentName = res.data.data.componentName+'-'+type
                    this.componentForm.componentName = res.data.data.componentName;
                    if (res.data.data.timeMode != '') {
                        this.componentForm.timeMode = res.data.data.timeMode;
                    } else {
                        //console.log('this.componentForm.timeMode', this.componentForm.timeMode);
                        //console.log('this.componentForm.componentType', this.componentForm.componentType);
                        if (this.componentForm.componentType == '延误' || this.componentForm.componentType == '拥堵') {
                            //console.log('this.componentForm.timeMode', this.componentForm.timeMode);
                            this.componentForm.timeMode = '固定间隔';
                        } else {
                            this.componentForm.timeMode = '实时触发';
                        }
                    }
                    this.componentForm.componentParameterId = res.data.data.componentParameterId;
                    if (res.data.data.cycleInterval == '') {
                        this.componentForm.cycleInterval = 1;
                    } else {
                        this.componentForm.cycleInterval = parseInt(res.data.data.cycleInterval);
                    }

                    this.componentForm.startSectionIds = res.data.data.startSectionIds;
                    // this.componentForm.flowType = res.data.data.flowType;
                    if (res.data.data.flowType == '') {
                        this.componentForm.flowType = '出流';
                    } else {
                        this.componentForm.flowType = res.data.data.flowType;
                    }
                    this.componentForm.startSectionNames = res.data.data.startSectionNames;
                    this.componentForm.endSectionIds = res.data.data.endSectionIds;
                    this.componentForm.endSectionNames = res.data.data.endSectionNames;
                    this.componentForm.company = res.data.data.company;
                    this.componentForm.endValue = res.data.data.endValue;
                    this.componentForm.startValue = res.data.data.startValue;
                    this.componentForm.presentationForm = res.data.data.presentationForm;
                    await this.getAllSectionalData(this.$route.query.id);
                    // this.componentForm.typeFiltering = res.data.data.typeFiltering
                    // this.componentForm.type = res.data.data.type
                    if (res.data.data.startSectionIds != '') {
                        //console.log('startSectionIds', res.data.data.startSectionIds);
                        var startSectionIdArr = [];
                        var startSectionArr = [];
                        startSectionIdArr = res.data.data.startSectionIds.split(',');
                        //console.log('this.sectionals', this.sectionals);
                        //console.log('startSectionIdArr', startSectionIdArr);
                        startSectionIdArr.forEach((item) => {
                            this.sectionals.forEach((items) => {
                                if (item == items.graphicId) {
                                    startSectionArr.push(items.graphicName);
                                    this.componentForm.startSection = startSectionArr;
                                }
                            });
                        });
                    } else {
                        let startSectionArr = [];
                        this.sectionals.forEach((items) => {
                            startSectionArr.push(items.graphicName);
                        });
                        if (startSectionArr.length > 0) {
                            this.componentForm.startSection = [startSectionArr[0]];
                            this.handleCheckedStartSection([startSectionArr[0]]);
                        }
                    }
                    if (res.data.data.endSectionIds != '') {
                        //console.log('endSectionIds', res.data.data.endSectionIds);
                        var endSectionIdArr = [];
                        var endSectionArr = [];
                        endSectionIdArr = res.data.data.endSectionIds.split(',');
                        //console.log('this.sectionals', this.sectionals);
                        //console.log('endSectionIdArr', endSectionIdArr);
                        endSectionIdArr.forEach((item) => {
                            this.sectionals.forEach((items) => {
                                if (item == items.graphicId) {
                                    endSectionArr.push(items.graphicName);
                                    this.componentForm.endSection = endSectionArr;
                                }
                            });
                        });
                    } else {
                        let endSectionArr = [];
                        this.sectionals.forEach((items) => {
                            endSectionArr.push(items.graphicName);
                        });
                        if (endSectionArr.length > 0) {
                            this.componentForm.endSection = [endSectionArr[0]];
                            this.handleCheckedendSection([endSectionArr[0]]);
                        }
                    }
                    if (this.componentForm.presentationForm != '') {
                        var arr = [];
                        arr = this.componentForm.presentationForm.split(',');
                        this.componentForm.presentation = arr;
                    } else if (this.componentForm.presentationForm == '') {
                        this.componentForm.presentation = [];
                    }
                    if (res.data.data.type != '') {
                        var arr = [];
                        arr = res.data.data.type.split(',');
                        this.componentForm.type = arr;
                    } else {
                        // this.componentForm.type = ["机动车", "非机动车", "行人"];
                    }
                    //console.log('this.componentForm', this.componentForm);
                }
            });
        },
        //双击修改模拟区组件、图形
        getSimulationAreaEdit(id, type, componentType, name, number) {
            // console.log('执行了getSimulationAreaEdit');
            // console.log('number', number);
            this.numberNew = number;
            if (type == '图形') {
                this.form.id = id;
                this.form.name = name;
                this.form.type = componentType;
                this.startFigureName = name;
                getJianktxDetails({ GraphicId: this.form.id }).then((res) => {
                    this.form.name = res.data.data.graphicName;
                    this.form.type = res.data.data.graphicType;
                    this.form.Direction = res.data.data.direction;
                    this.typeCheckList = res.data.data.type.split('|');
                    if (res.data.data.isPerceptualCoding == '0') {
                        this.switchValue = 0;
                    } else if (res.data.data.isPerceptualCoding == '1') {
                        this.switchValue = 1;
                    }
                    this.order = res.data.data.sort;
                    let dataString = res.data.data.perceptualCoding.toString();
                    this.perception.scene = dataString.charAt(0);
                    this.perception.position = dataString.charAt(2);
                    this.perception.place = dataString.charAt(3);
                    this.perception.laneOrdinary = dataString.charAt(4);
                    this.perception.bearings = dataString.charAt(5) + dataString.charAt(6);
                    this.perception.flowDirection = dataString.charAt(7);
                    this.perception.laneNumber = dataString.charAt(8);
                    this.perception.laneNumber1 = dataString.charAt(9);
                });
                if (this.form.type == '轨迹') {
                    this.dialogFormVisible = true;
                } else if (this.form.type == '区域') {
                    this.dialogFormVisible = true;
                } else if (this.form.type == '断面') {
                    this.dialogFormVisible = true;
                }
            } else if (type == '组件') {
                this.closeEditShow = true;
                this.closeComponentShow = false;
                this.componentId = id;
                this.componentForm.componentType = componentType;
                this.componentTitle = componentType;
                getComponentData({ AnalogAreaComponentId: id }).then(async(res) => {
                    //console.log('res', res);
                    if (res.data.code == 200) {
                        //console.log('res', res.data.data);
                        this.component = true;
                        if (res.data.data.company != '') {
                            this.componentForm.company = res.data.data.company;
                        }
                        if (res.data.data.timeMode != '') {
                            this.componentForm.timeMode = res.data.data.timeMode;
                        } else {
                            if (this.componentForm.componentType == '延误' || this.componentForm.componentType == '拥堵') {
                                this.componentForm.timeMode = '固定间隔';
                            } else {
                                this.componentForm.timeMode = '实时触发';
                            }
                        }
                        this.componentForm.componentName = res.data.data.componentName;
                        this.componentForm.componentParameterId = res.data.data.componentParameterId;
                        // this.componentForm.cycleInterval = parseInt(res.data.data.cycleInterval);
                        if (res.data.data.cycleInterval == '') {
                            this.componentForm.cycleInterval = 1;
                        } else {
                            this.componentForm.cycleInterval = parseInt(res.data.data.cycleInterval);
                        }
                        // this.componentForm.flowType = res.data.data.flowType;
                        if (res.data.data.flowType == '') {
                            this.componentForm.flowType = '出流';
                        } else {
                            this.componentForm.flowType = res.data.data.flowType;
                        }
                        this.componentForm.startSectionIds = res.data.data.startSectionIds;
                        this.componentForm.startSectionNames = res.data.data.startSectionNames;
                        this.componentForm.endSectionIds = res.data.data.endSectionIds;
                        this.componentForm.endSectionNames = res.data.data.endSectionNames;
                        this.componentForm.endValue = res.data.data.endValue;
                        this.componentForm.startValue = res.data.data.startValue;
                        this.componentForm.presentationForm = res.data.data.presentationForm;
                        // this.componentForm.type = res.data.data.type
                        await this.getAllSectionalData(this.$route.query.id);
                        if (res.data.data.startSectionIds != '') {
                            //console.log('startSectionIds', res.data.data.startSectionIds);
                            var startSectionIdArr = [];
                            var startSectionArr = [];
                            startSectionIdArr = res.data.data.startSectionIds.split(',');
                            //console.log('this.sectionals', this.sectionals);
                            //console.log('startSectionIdArr', startSectionIdArr);
                            startSectionIdArr.forEach((item) => {
                                this.sectionals.forEach((items) => {
                                    if (item == items.graphicId) {
                                        startSectionArr.push(items.graphicName);
                                        this.componentForm.startSection = startSectionArr;
                                    }
                                });
                            });
                        }
                        if (res.data.data.endSectionIds != '') {
                            //console.log('endSectionIds', res.data.data.endSectionIds);
                            var endSectionIdArr = [];
                            var endSectionArr = [];
                            endSectionIdArr = res.data.data.endSectionIds.split(',');
                            //console.log('this.sectionals', this.sectionals);
                            //console.log('endSectionIdArr', endSectionIdArr);
                            endSectionIdArr.forEach((item) => {
                                this.sectionals.forEach((items) => {
                                    if (item == items.graphicId) {
                                        endSectionArr.push(items.graphicName);
                                        this.componentForm.endSection = endSectionArr;
                                    }
                                });
                            });
                        }
                        if (this.componentForm.presentationForm != '') {
                            var arr = [];
                            arr = this.componentForm.presentationForm.split(',');
                            this.componentForm.presentation = arr;
                        } else if (this.componentForm.presentationForm == '') {
                            this.componentForm.presentation = [];
                        }
                        if (res.data.data.type != '') {
                            var arr = [];
                            arr = res.data.data.type.split(',');
                            this.componentForm.type = arr;
                        } else {
                            // this.componentForm.type = ['机动车', '非机动车', '行人'];
                        }
                    }
                });
            }
        },
        //获取所有断面数据
        getAllSectionalData(VideoId) {
            return getSectionalData({ VideoId: VideoId }).then((res) => {
                //console.log('res', res);
                if (res.data.code == 200) {
                    this.sectionals = res.data.data;
                }
            });
        },
        figureType(type) {
            if (type == 'Move') {
                type = '轨迹';
            } else if (type == 'Poly') {
                type = '区域';
            } else if (type == 'Line') {
                type = '断面';
            }
            return type;
        },
        getFigureD(item, index, indexNew, numberNew) {
            //console.log('图形类型', item);
            //console.log('初始图形名称', index);
            this.startFigureName = index;
            //console.log('图形位置', indexNew);
            // numberNew 1-画布区 2-模拟区
            this.numberNew = numberNew;
            this.dialogFormVisible = true;
            this.switchValue = 0;
            this.typeCheckList = [
                'traffic police',
                'sanitation worker',
                'general pedestrian',
                'tricycle',
                'bicycle',
                'electric bicycle',
                'car',
                'truck',
                'coach',
                'bus',
                'special vehicle',
                'construction vehicle',
                'fire'
            ]; //类型复选框
            this.form.name = index;
            this.form.type = this.figureType(item);
            this.form.Direction = '正向';
            this.form.coordinate = indexNew;
            this.form.id = '';
            this.title = this.figureType(item);
            this.orderShow = false;
        },
        //右击图形修改图形名称弹框
        getModifyTheNameN(data, number) {
            this.orderShow = true;
            //console.log('data', data);
            //console.log('number', number);
            this.numberNew = number;
            var arr = [];
            arr = data.split(',');
            //console.log('arr', arr);
            this.form.id = arr[0];
            // this.form.name = arr[1];
            // this.form.type = arr[2];
            this.startFigureName = arr[1];
            getJianktxDetails({ GraphicId: this.form.id }).then((res) => {
                this.form.name = res.data.data.graphicName;
                this.form.type = res.data.data.graphicType;
                this.form.Direction = res.data.data.direction;
                this.typeCheckList = res.data.data.type.split('|');
                if (res.data.data.isPerceptualCoding == '0') {
                    this.switchValue = 0;
                } else if (res.data.data.isPerceptualCoding == '1') {
                    this.switchValue = 1;
                }
                this.order = res.data.data.sort;
                let dataString = res.data.data.perceptualCoding.toString();
                this.perception.scene = dataString.charAt(0);
                this.perception.position = dataString.charAt(2);
                this.perception.place = dataString.charAt(3);
                this.perception.laneOrdinary = dataString.charAt(4);
                this.perception.bearings = dataString.charAt(5) + dataString.charAt(6);
                this.perception.flowDirection = dataString.charAt(7);
                this.perception.laneNumber = dataString.charAt(8);
                this.perception.laneNumber1 = dataString.charAt(9);
                if (this.form.type == '轨迹') {
                    // this.open2()
                    this.dialogFormVisible = true;
                } else if (this.form.type == '区域') {
                    this.dialogFormVisible = true;
                } else if (this.form.type == '断面') {
                    this.dialogFormVisible = true;
                }
            });
        },
        //新增、编辑图形确认按钮
        onSubmit(form) {
            //console.log('form', form);
            //新增
            if (
                this.switchValue == 1 &&
                (this.perception.scene == '' ||
                    this.perception.position == '' ||
                    this.perception.place == '' ||
                    this.perception.laneOrdinary == '' ||
                    this.perception.bearings == '' ||
                    this.perception.flowDirection == '' ||
                    this.perception.laneNumber === '' ||
                    this.perception.laneNumber1 === '')
            ) {
                this.$message.warning('请填写完整感知编码!');
                return false;
            }
            if (form.id == '') {
                let formData = new FormData();
                if (form.type == '断面') {
                    let circuit = '';
                    if (this.switchValue == 1) {
                        circuit = '1';
                    }
                    let PerceptualCoding =
                        this.perception.scene +
                        circuit +
                        this.perception.position +
                        this.perception.place +
                        this.perception.laneOrdinary +
                        this.perception.bearings +
                        this.perception.flowDirection +
                        this.perception.laneNumber +
                        this.perception.laneNumber1;
                    let type = this.typeCheckList.join('|');
                    formData.append('GraphicName', form.name);
                    formData.append('GraphicType', form.type);
                    formData.append('Coordinate', form.coordinate);
                    formData.append('VideoId', this.VideoId);
                    formData.append('Direction', form.Direction);
                    formData.append('Type', type);
                    formData.append('IsPerceptualCoding', this.switchValue);
                    formData.append('PerceptualCoding', PerceptualCoding);
                } else if (form.type == '区域') {
                    let circuit = '';
                    if (this.switchValue == 1) {
                        circuit = '2';
                    }
                    let PerceptualCoding =
                        this.perception.scene +
                        circuit +
                        this.perception.position +
                        this.perception.place +
                        this.perception.laneOrdinary +
                        this.perception.bearings +
                        this.perception.flowDirection +
                        this.perception.laneNumber +
                        this.perception.laneNumber1;
                    let type = this.typeCheckList.join('|');
                    formData.append('GraphicName', form.name);
                    formData.append('GraphicType', form.type);
                    formData.append('Coordinate', form.coordinate);
                    formData.append('VideoId', this.VideoId);
                    formData.append('Type', type);
                    formData.append('IsPerceptualCoding', this.switchValue);
                    formData.append('PerceptualCoding', PerceptualCoding);
                    // formData.append("Direction",form.Direction);
                    // formData.append("StoppingSpeed",form.StoppingSpeed);
                } else {
                    formData.append('GraphicName', form.name);
                    formData.append('GraphicType', form.type);
                    formData.append('Coordinate', form.coordinate);
                    formData.append('VideoId', this.VideoId);
                    // formData.append("Direction",form.Direction);
                }

                axios({
                    method: 'post',
                    url: serverUrl.addFigure,
                    data: formData
                }).then((res) => {
                    //console.log('res', res);

                    if (res.data.code == 200) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        // setTimeout(() => {
                        //     this.$message({
                        //     type: "warning",
                        //     message: "请点击交通分析，获取最新数据！",
                        //     showClose: true,
                        //     duration:0,
                        //     });
                        // }, 3000);
                        document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data));
                        if (form.type == '断面') {
                            document
                                .getElementById('mapModule')
                                .contentWindow.postFigureName(
                                    JSON.stringify(
                                        res.data.data +
                                            ',' +
                                            form.name +
                                            ',' +
                                            this.startFigureName +
                                            ',' +
                                            this.numberNew +
                                            ',' +
                                            form.Direction +
                                            ',add'
                                    )
                                );
                        } else {
                            document
                                .getElementById('mapModule')
                                .contentWindow.postFigureName(
                                    JSON.stringify(
                                        res.data.data + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ', ' + ',add'
                                    )
                                );
                        }

                        this.dialogFormVisible = false;
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }
                });
            } else {
                //编辑
                let formData = new FormData();
                if (form.type == '断面') {
                    let circuit = '';
                    if (this.switchValue == 1) {
                        circuit = '1';
                    }
                    let PerceptualCoding =
                        this.perception.scene +
                        circuit +
                        this.perception.position +
                        this.perception.place +
                        this.perception.laneOrdinary +
                        this.perception.bearings +
                        this.perception.flowDirection +
                        this.perception.laneNumber +
                        this.perception.laneNumber1 +
                        this.order;
                    let type = this.typeCheckList.join('|');
                    formData.append('GraphicName', form.name);
                    formData.append('GraphicType', form.type);
                    formData.append('Direction', form.Direction);
                    formData.append('GraphicId', form.id);
                    formData.append('VideoId', this.VideoId);
                    formData.append('Type', type);
                    formData.append('IsPerceptualCoding', this.switchValue);
                    formData.append('Type', type);
                    formData.append('IsPerceptualCoding', this.switchValue);
                    formData.append('PerceptualCoding', PerceptualCoding);
                } else if (form.type == '区域') {
                    let circuit = '';
                    if (this.switchValue == 1) {
                        circuit = '2';
                    }
                    let PerceptualCoding =
                        this.perception.scene +
                        circuit +
                        this.perception.position +
                        this.perception.place +
                        this.perception.laneOrdinary +
                        this.perception.bearings +
                        this.perception.flowDirection +
                        this.perception.laneNumber +
                        this.perception.laneNumber1 +
                        this.order;
                    let type = this.typeCheckList.join('|');
                    formData.append('GraphicName', form.name);
                    formData.append('GraphicType', form.type);
                    formData.append('Direction', form.Direction);
                    formData.append('GraphicId', form.id);
                    formData.append('VideoId', this.VideoId);
                    formData.append('StoppingSpeed', form.StoppingSpeed);
                    formData.append('Type', type);
                    formData.append('IsPerceptualCoding', this.switchValue);
                    formData.append('PerceptualCoding', PerceptualCoding);
                } else {
                    formData.append('GraphicName', form.name);
                    formData.append('GraphicType', form.type);
                    // formData.append("Direction",form.Direction);
                    formData.append('GraphicId', form.id);
                    formData.append('VideoId', this.VideoId);
                }
                axios({
                    method: 'post',
                    url: serverUrl.editFigure,
                    data: formData
                }).then((res) => {
                    //console.log('res', res);
                    if (res.data.code == 200) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        // setTimeout(() => {
                        //     this.$message({
                        //         type: 'warning',
                        //         message: '请点击交通分析，获取最新数据！',
                        //         showClose: true,
                        //         duration: 0
                        //     });
                        // }, 5000);
                        //console.log('startFigureName', this.startFigureName);
                        document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data));
                        //console.log('this.numberNew', this.numberNew);
                        if (form.type == '断面') {
                            document
                                .getElementById('mapModule')
                                .contentWindow.postFigureName(
                                    JSON.stringify(
                                        form.id +
                                            ',' +
                                            form.name +
                                            ',' +
                                            this.startFigureName +
                                            ',' +
                                            this.numberNew +
                                            ',' +
                                            form.Direction +
                                            ',edit'
                                    )
                                );
                        } else {
                            document
                                .getElementById('mapModule')
                                .contentWindow.postFigureName(
                                    JSON.stringify(
                                        form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ', ' + ',edit'
                                    )
                                );
                        }

                        this.dialogFormVisible = false;
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }
                });
            }
        },
        //编辑组件
        onSubmitComponent(componentForm) {
            // console.log(componentForm, 'ffffffffff');
            if (componentForm.timeMode != '实时触发' && componentForm.company == '') {
                this.$message.warning('请选择必选项');
                return false;
            } else if (
                // componentForm.timeMode != '实时触发' &&
                componentForm.componentType == 'OD' &&
                (componentForm.endSection.length == 0 || componentForm.startSection.length == 0)
            ) {
                this.$message.warning('请选择必选项');
                return false;
            } else if (
                // componentForm.timeMode != '实时触发' &&
                componentForm.componentType == '类型' &&
                (componentForm.presentation.length == 0 || componentForm.type.length == 0)
            ) {
                this.$message.warning('请选择必选项');
                return false;
            } else if (
                // componentForm.timeMode != '实时触发' &&
                componentForm.componentType != '类型' &&
                componentForm.componentType != 'OD' &&
                componentForm.presentation.length == 0
            ) {
                this.$message.warning('请选择必选项');
                return false;
            } else {
                if (!componentForm.componentName.trim()) {
                    this.$message.warning('请输入名称');
                    return false;
                }
                this.component = false;

                let formData = new FormData();
                if (componentForm.componentType == 'OD') {
                    //名称
                    formData.append('componentName', componentForm.componentName);
                    //单位
                    formData.append('company', componentForm.company);
                    //id
                    formData.append('componentParameterId', componentForm.componentParameterId);
                    formData.append('cycleInterval', componentForm.cycleInterval);
                    formData.append('startSectionIds', componentForm.startSectionIds);
                    formData.append('startSectionNames', componentForm.startSectionNames);
                    formData.append('endSectionIds', componentForm.endSectionIds);
                    formData.append('endSectionNames', componentForm.endSectionNames);
                    formData.append('endValue', componentForm.endValue);
                    formData.append('startValue', componentForm.startValue);
                    formData.append('timeMode', componentForm.timeMode);

                    formData.append('presentationForm', '矩阵图');
                } else if (componentForm.componentType == '类型') {
                    //console.log(componentForm.type, 'componentForm.type');
                    //名称
                    formData.append('componentName', componentForm.componentName);
                    //单位
                    formData.append('company', componentForm.company);
                    //id
                    formData.append('componentParameterId', componentForm.componentParameterId);
                    formData.append('cycleInterval', componentForm.cycleInterval);
                    formData.append('endValue', componentForm.endValue);
                    formData.append('startValue', componentForm.startValue);
                    formData.append('timeMode', componentForm.timeMode);
                    formData.append('presentationForm', componentForm.presentationForm);
                    formData.append('type', componentForm.type);
                } else {
                    //名称
                    formData.append('componentName', componentForm.componentName);
                    //单位
                    formData.append('company', componentForm.company);
                    //id
                    formData.append('componentParameterId', componentForm.componentParameterId);
                    formData.append('cycleInterval', componentForm.cycleInterval);
                    formData.append('endValue', componentForm.endValue);
                    formData.append('startValue', componentForm.startValue);
                    formData.append('timeMode', componentForm.timeMode);
                    formData.append('presentationForm', componentForm.presentationForm);
                    formData.append('flowType', componentForm.flowType);
                }
                axios({
                    method: 'post',
                    url: serverUrl.editComponent,
                    data: formData
                }).then((res) => {
                    //console.log('res', res);
                    if (res.data.code == 200) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        // document.getElementById("mapModule").contentWindow.postFigureId(JSON.stringify(res.data.data))
                        document
                            .getElementById('mapModule')
                            .contentWindow.editComponent(this.componentId + ',' + componentForm.componentName);
                        this.dialogFormVisible = false;
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }
                });
            }
        },
        //新增编辑组件取消
        closeComponent(componentForm) {
            //console.log('componentForm', componentForm);

            this.component = false;
            let formData = new FormData();
            if (componentForm.componentType == 'OD') {
                //名称
                formData.append('componentName', componentForm.componentName);
                //单位
                formData.append('company', componentForm.company);
                //id
                formData.append('componentParameterId', componentForm.componentParameterId);
                formData.append('cycleInterval', componentForm.cycleInterval);
                formData.append('startSectionIds', componentForm.startSectionIds);
                formData.append('startSectionNames', componentForm.startSectionNames);
                formData.append('endSectionIds', componentForm.endSectionIds);
                formData.append('endSectionNames', componentForm.endSectionNames);
                formData.append('endValue', componentForm.endValue);
                formData.append('startValue', componentForm.startValue);
                formData.append('timeMode', componentForm.timeMode);

                formData.append('presentationForm', '矩阵图');
            } else if (componentForm.componentType == '类型') {
                //名称
                formData.append('componentName', componentForm.componentName);
                //单位
                formData.append('company', componentForm.company);
                //id
                formData.append('componentParameterId', componentForm.componentParameterId);
                formData.append('cycleInterval', componentForm.cycleInterval);
                formData.append('endValue', componentForm.endValue);
                formData.append('startValue', componentForm.startValue);
                formData.append('timeMode', componentForm.timeMode);
                formData.append('presentationForm', componentForm.presentationForm);
                formData.append('type', componentForm.type);
            } else {
                //名称
                formData.append('componentName', componentForm.componentName);
                //单位
                formData.append('company', componentForm.company);
                //id
                formData.append('componentParameterId', componentForm.componentParameterId);
                formData.append('cycleInterval', componentForm.cycleInterval);
                formData.append('endValue', componentForm.endValue);
                formData.append('startValue', componentForm.startValue);
                formData.append('timeMode', componentForm.timeMode);
                formData.append('presentationForm', componentForm.presentationForm);
                formData.append('flowType', componentForm.flowType);
            }
            axios({
                method: 'post',
                url: serverUrl.editComponent,
                data: formData
            }).then((res) => {
                //console.log('res', res);

                if (res.data.code == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    // document.getElementById("mapModule").contentWindow.postFigureId(JSON.stringify(res.data.data))
                    document.getElementById('mapModule').contentWindow.editComponent(this.componentId + ',' + componentForm.componentName);
                    this.dialogFormVisible = false;
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            });
            // document.getElementById('mapModule').contentWindow.editComponent('');
        },
        closeEdit(componentForm) {
            this.component = false;
            document.getElementById('mapModule').contentWindow.editComponent('');
        },
        //新增、编辑图形取消按钮
        closeFigure(form) {
            //console.log('form', form);
            if (form.id != '') {
                this.dialogFormVisible = false;
                document.getElementById('mapModule').contentWindow.closeEdit(JSON.stringify(form.type + ',' + form.id));
            } else {
                this.dialogFormVisible = false;
                document.getElementById('mapModule').contentWindow.delFigure();
            }
        },
        closeDialog() {
            this.dialogFormVisible = false;
            if (this.form.id != '') {
                document.getElementById('mapModule').contentWindow.closeEdit(JSON.stringify(this.form.type + ',' + this.form.id));
            } else {
                this.dialogFormVisible = false;
                document.getElementById('mapModule').contentWindow.delFigure();
            }
        },
        closeComponentForm(componentForm) {
            //console.log('111', componentForm);
            if (this.closeComponentShow == false) {
                this.component = false;
                document.getElementById('mapModule').contentWindow.editComponent('');
            } else if (this.closeComponentShow == true) {
                this.closeComponent(componentForm);
            }
        },
        closeForm(form) {
            if (this.form.id != '') {
                this.dialogFormVisible = false;
                document.getElementById('mapModule').contentWindow.closeEdit(JSON.stringify(form.type + ',' + form.id));
            } else {
                this.dialogFormVisible = false;
                document.getElementById('mapModule').contentWindow.delFigure();
            }
        },
        //改变起点
        handleCheckedStartSection(value) {
            // console.log('改变起点', value);
            var startSectionIdArr = [];
            var startSectionNameArr = [];
            if (value.length == 0) {
                this.componentForm.startSectionIds = '';
                this.componentForm.startSectionNames = '';
            }
            value.forEach((item) => {
                this.sectionals.forEach((items) => {
                    if (item == items.graphicName) {
                        startSectionIdArr.push(items.graphicId);
                        startSectionNameArr.push(items.graphicName);
                        let newStartSectionId = startSectionIdArr.join(',');
                        let newStartSectionName = startSectionNameArr.join(',');
                        this.componentForm.startSectionIds = newStartSectionId;
                        this.componentForm.startSectionNames = newStartSectionName;
                    }
                });
            });
        },
        //改变终点
        handleCheckedendSection(value) {
            //console.log('改变终点', value);
            var endSectionIdArr = [];
            var endSectionNameArr = [];
            if (value.length == 0) {
                this.componentForm.endSectionIds = '';
                this.componentForm.endSectionNames = '';
            }
            value.forEach((item) => {
                this.sectionals.forEach((items) => {
                    if (item == items.graphicName) {
                        endSectionIdArr.push(items.graphicId);
                        endSectionNameArr.push(items.graphicName);
                        let newendSectionId = endSectionIdArr.join(',');
                        let newEndSectionName = endSectionNameArr.join(',');
                        //console.log('newendSectionId', newendSectionId);
                        //console.log('newEndSectionName', newEndSectionName);
                        this.componentForm.endSectionIds = newendSectionId;
                        this.componentForm.endSectionNames = newEndSectionName;
                    }
                });
            });
        },
        //修改展现形式
        handlePresentation(value) {
            //console.log('展现形式', value);
            let presentation = value.join(',');
            this.componentForm.presentationForm = presentation;
            //console.log('this.componentForm.presentationForm', this.componentForm.presentationForm);
        },
        //类型数据
        handleTypeData(value) {
            //console.log('类型数据', value);
            let type = value.join(',');
            this.componentForm.typeData = type;
        },
        //模型加载等待
        loadingShow(data) {
            this.loadingShow1 = data;
        },

        handleSearch() {
            this.modelOthers = true;
            this.$refs.htModels.finbBox(this.inputVal);
            //console.log(this.$refs.htModels, 'asdasdasd');
            this.inputVal = '';
        },
        handleRow(val) {
            this.modelOthers = true;
            this.$refs.htModels.finbBox(val);
        },
        // 天气
        handleWather() {
            axios({
                url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',
                methods: ''
            }).then((res) => {
                this.weatherItem = res.data.lives[0];
                //console.log(this.weatherItem, 'asdsads');
            });
        }
    },
    directives: {
        draggable,
        draggableDelection
    },
    components: {
        editModal,
        analysisConfiguration,
        dataBoard
    },
    beforeDestroy() {
        // clearTimeout(this.timer1);
        clearTimeout(this.timer2);
        clearTimeout(this.timer3);
        clearTimeout(this.timer4);
        clearInterval(this.imgMessagetimer);
        this.timer1 = null;
        this.timer2 = null;
        this.timer3 = null;
        this.timer4 = null;
        this.imgMessagetimer = null;
    }
};
</script>
<style scoped>
.el-form-item {
    margin-bottom: 15px;
}

.content-box::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}

/* .new-dialog {
  width: 49%;
  height: 11%;
  left: calc(24vw);
  top: 90vh;
  bottom: 0 ;
} */

.formBox {
    margin-top: 20px;
    margin-left: 20px;
    height: 650px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* .new-dialog .el-dialog {
    width:100%!important;
        margin: 0vh auto !important;
        margin-top: 0vh!important;
} */

.new-dialog .el-dialog {
    width: 100% !important;
    margin: 0 auto 0px !important;
    /* margin-top: 0vh!important; */
}
.titleDraggable {
    width: 100%;
    height: 10%;
    border: 1px soild red;
}
.new-dialog .el-dialog__wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}

.new-dialog .customWidth {
    width: 100%;
    min-width: 150px;
}

.mapModuleApp {
    /* width:100%; */
    width: 1600px;
    height: 900px;
    display: inline-block;
    border: 1px soild #eee;
}

/* .el-drawer.btt,
.el-drawer.ttb {
  width: 100%;
  left: 0;
  right: 0;
  height: 100% !important;
} */

/* .el-drawer__container {
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
} */

.videoAnalysis {
    position: absolute;
    right: 200px;
    top: 17px;
}

.trafficAnalysis {
    position: absolute;
    right: 100px;
    top: 17px;
}
::v-deep .new-dialog.el-dialog__wrapper {
    width: 100%;
    overflow: hidden !important;
    background: rgba(0, 0, 0, 0.4);
    /* margin-left:30% */
}
::v-deep .componentDialog.el-dialog__wrapper {
    width: 100%;
}
</style>

<style>
.progressNew {
    width: 10%;
    position: absolute;
    right: 200px;
    top: 22px;
}
.progressNew .el-progress__text {
    color: #000 !important;
    margin-left: 6px !important;
}
.el-tabs--border-card .el-tabs__content {
    padding: 5px 15px !important;
}
.progressNewV {
    width: 10%;
    position: absolute;
    right: 200px;
    top: 22px;
}
.progressNewV .el-progress__text {
    color: #e22b2b !important;
    margin-left: 6px !important;
}
.progressNewV .el-progress-bar__inner {
    background-color: #f56c6c !important;
}
.el-tabs--border-card .el-tabs__content {
    padding: 5px 15px !important;
}
</style>
