2806 lines
127 KiB
Vue
2806 lines
127 KiB
Vue
<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>
|