1345 lines
60 KiB
Vue
1345 lines
60 KiB
Vue
<template>
|
||
<div class="content-box">
|
||
<!-- <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" :activeName="activeName" :triggerData="triggerData" :triggerListData="triggerListData"
|
||
:cycleTimeData="cycleTimeData" :cycleStatisticsData="cycleStatisticsData" ></dataBoard>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="分析配置" name="third">
|
||
<analysisConfiguration :analysisConfigurationdata="analysisConfigurationdata"></analysisConfiguration>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="分析状态" name="fourth">
|
||
<editModal></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> -->
|
||
<el-button class="trafficAnalysis" type="primary" plain size="mini" @click="trafficAnalysisBtn"
|
||
v-if="trafficAnalysisShow" :disabled="disabledTrafficAnalysis">交通分析</el-button>
|
||
</div>
|
||
<el-drawer class="new-dialog" :visible.sync="dialogFormVisible" direction="btt" custom-class="demo-drawer"
|
||
ref="drawer" :modal="false" :close-on-click-modal="false" v-alterELDialogMarginTop="{ marginTop: '0vh' }"
|
||
width="100%" :wrapperClosable="false" :with-header="false" size="100%">
|
||
<div class="formBox">
|
||
<el-form ref="form" :model="form" label-width="80px" :inline="true">
|
||
<el-form-item label="组件名称">
|
||
<el-input v-model="form.name"></el-input>
|
||
</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>
|
||
<el-button type="primary" @click="onSubmit(form)">确认</el-button>
|
||
<el-button @click="closeFigure(form)">取消</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</el-drawer>
|
||
<!-- 组件弹框 -->
|
||
<el-dialog :title="componentTitle + '指标组件'" width="40%" :visible.sync="component" :close-on-click-modal="false"
|
||
@close="closeComponentForm()">
|
||
<el-form ref="form" :model="componentForm" label-width="150px">
|
||
<el-form-item label="名称：">
|
||
<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>
|
||
</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="1" 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="周期统计" v-if="componentForm.componentType != 'OD'"> </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="周期间隔：" 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="componentForm.timeMode != '周期统计'"></el-option>
|
||
<el-option label="分钟" value="分钟"></el-option>
|
||
<el-option label="小时" value="小时"></el-option>
|
||
</el-select>
|
||
<!-- <el-slider v-model="componentForm.cycleInterval" :max="max" :min="min"> </el-slider> -->
|
||
<el-slider v-model="componentForm.cycleInterval" :max="100" :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="单位：" ></el-form-item> -->
|
||
<el-form-item label="起点：" 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="终点：" 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="展现形式：" 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.componentType != '延误'"></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)">取消</el-button>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
</el-dialog>
|
||
|
||
<!-- </div> -->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// import mqtt from "mqtt"; // mqtt协议
|
||
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
|
||
} from '../api/index';
|
||
import serverUrl from '../config/apiurl.js';
|
||
import axios from 'axios';
|
||
// mqtt
|
||
// import mqttHandle from "../../../utils/mqttHandle";
|
||
import mqttConfig from '@/utils/mqttConfig.js';
|
||
var mqtt; //mqtt 处理对象（全局变量）
|
||
var client;
|
||
// //判断
|
||
export default {
|
||
data() {
|
||
return {
|
||
max:'100',
|
||
min:'1',
|
||
receiveNews: '',
|
||
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: ['机动车', '非机动车', '行人'],
|
||
startSection: [],
|
||
endSection: [],
|
||
componentType: '',
|
||
typeFiltering: '',
|
||
typeData: [],
|
||
FlowType: '出流'
|
||
},
|
||
// typeData: ['小汽车', '公交车', '卡车', '非机动车', '行人'],
|
||
typeData: ['机动车', '非机动车', '行人'],
|
||
//展现形式
|
||
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: [],
|
||
//视频类型
|
||
videoType: '',
|
||
videoAnalysisShow: false,
|
||
trafficAnalysisShow: false,
|
||
//控制unity展示
|
||
videoUnityShow: true,
|
||
videoAnalysisSta: '',
|
||
analysis: {
|
||
trafficAnalysisPath1: '',
|
||
trafficAnalysisPath2: '',
|
||
videoAnalysisPath: '',
|
||
videoName: '',
|
||
videoPath: '',
|
||
videoTotalFrames: '',
|
||
videoType: '实时视频'
|
||
},
|
||
description: '请等待排队',
|
||
ipData: '',
|
||
|
||
|
||
componentList:[]
|
||
};
|
||
},
|
||
|
||
//离开当前页面后执行
|
||
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.delSuccess = this.delSuccess;
|
||
|
||
// console.log("id",id)
|
||
// console.log("num",num)
|
||
// console.log("name",name)
|
||
// console.log("type",type)
|
||
// console.log("status",status)
|
||
// this.videoType = this.$route.query.type;
|
||
if (this.$route.query.type == '实时视频') {
|
||
this.videoAnalysisShow = false;
|
||
this.trafficAnalysisShow = false;
|
||
|
||
this.createMqtt();
|
||
|
||
// document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));
|
||
} else if (this.$route.query.type == '离线视频') {
|
||
this.videoAnalysisShow = true;
|
||
this.trafficAnalysisShow = true;
|
||
this.getAnalysisStatus();
|
||
// this.createMqtt();
|
||
// if(this.$route.query.status=='未分析'){
|
||
// }
|
||
// if(this.$route.query.status=='未分析'){
|
||
// // document.getElementById('mapModule').contentWindow.lixianVideo("实时视频");
|
||
// }else{
|
||
// }
|
||
}
|
||
},
|
||
mounted() { },
|
||
methods: {
|
||
// 数据看板的标签点击
|
||
handleClick: function(tab, event) {
|
||
var that = this
|
||
if(tab._props.name=='second'){
|
||
that.$nextTick(()=>{
|
||
that.$refs.dataBoardRef.getNew()
|
||
})
|
||
}
|
||
},
|
||
/** 创建mqtt */
|
||
createMqtt() {
|
||
//创建链接，接收数据
|
||
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
|
||
];
|
||
window.PubScribe(this.topicSends, this.number, this.realInfo);
|
||
// mqtt = mqttConfig;
|
||
/*mqtt = new mqttConfig(this.topicSends);
|
||
client = mqtt.createConnect();
|
||
client.subscribe(['img'+this.number,'stream'+this.number, 'trajectory'+this.number, 'detection'+this.number], { qos: 0 }, (err)=> {
|
||
if (!err) {
|
||
console.log("订阅成功");
|
||
// setTimeout(function() {
|
||
client.publish('msg_stream',JSON.stringify({"msg_flag":parseInt(this.number)}))
|
||
// }, 1000);
|
||
|
||
} else {
|
||
console.log('消息订阅失败！')
|
||
}
|
||
|
||
});
|
||
client.on("message", (topic, message) => {
|
||
//数据分类
|
||
try {
|
||
// this.receiveNews = this.receiveNews.concat(message);
|
||
// this.realInfo(topic, this.receiveNews);
|
||
this.realInfo(topic, message);
|
||
} catch (error) {
|
||
|
||
}
|
||
});*/
|
||
},
|
||
//获取视频分析，交通分析状态数据
|
||
getAnalysisStatus() {
|
||
getVideoStatus(this.$route.query.id).then(res => {
|
||
console.log('res.data', res.data);
|
||
//视频分析状态
|
||
if (res.data.data.videoAnalysisStatus == '未分析') {
|
||
this.disabledTrafficAnalysis = true;
|
||
this.videoUnityShow = true;
|
||
this.analysisData();
|
||
} else if (res.data.data.videoAnalysisStatus == '分析中') {
|
||
this.disabledVideoAnalysis = true;
|
||
this.videoUnityShow = false;
|
||
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.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;
|
||
}
|
||
});
|
||
},
|
||
//分析视频按钮
|
||
videoAnalysisBtn() {
|
||
startVideoAnalysis(this.$route.query.id).then(res => {
|
||
//
|
||
if (res.data.msg == '请求成功') {
|
||
this.$message({
|
||
message: '启动成功',
|
||
type: 'success'
|
||
});
|
||
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'
|
||
});
|
||
document.getElementById('mapModule').contentWindow.addColor();
|
||
} else {
|
||
this.$message({
|
||
message: res.data.msg,
|
||
type: 'warning'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
//获取视频分析结果
|
||
analysisData() {
|
||
getAnalysisData(this.$route.query.id).then(res => {
|
||
console.log('res.data.data', res.data.data);
|
||
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.videoTotalFrames = res.data.data.videoTotalFrames;
|
||
this.analysis.videoType = this.$route.query.type;
|
||
});
|
||
},
|
||
//停止订阅mqtt
|
||
disConnect() {
|
||
/*if (client != null) {
|
||
client.unsubscribe(this.topicSends);
|
||
client = null;
|
||
}*/
|
||
},
|
||
/** 实时数据分类 */
|
||
realInfo(topic, message) {
|
||
switch (topic) {
|
||
// 接收托片
|
||
case 'img' + this.number:
|
||
try {
|
||
const utf8decoder = new TextDecoder();
|
||
const u8arr = new Uint8Array(message);
|
||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
// console.log("msg",msg)
|
||
// document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
|
||
|
||
if (msg.rate == 'high') {
|
||
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
|
||
} else {
|
||
this.analysisConfigurationdata = msg;
|
||
}
|
||
} catch (error) { }
|
||
break;
|
||
// 树结构
|
||
case 'stream' + this.number:
|
||
try {
|
||
const utf8decoder1 = new TextDecoder();
|
||
const u8arr = new Uint8Array(message);
|
||
const temp = utf8decoder1.decode(u8arr); // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp);
|
||
// console.log("msg",msg)
|
||
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
|
||
} catch (error) { }
|
||
break;
|
||
// 控制台输出
|
||
case 'trajectory' + this.number:
|
||
try {
|
||
const utf8decoder = new TextDecoder();
|
||
const u8arr = new Uint8Array(message);
|
||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp);
|
||
// console.log("msg",msg)
|
||
document.getElementById('mapModule').contentWindow.getGuiJi(JSON.stringify(msg));
|
||
} catch (error) { }
|
||
break;
|
||
// 触发
|
||
case 'detection' + this.number:
|
||
try {
|
||
const utf8decoder = new TextDecoder();
|
||
const u8arr = new Uint8Array(message);
|
||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||
var detId = [];
|
||
const msgN = JSON.parse(temp);
|
||
// console.log("msgN",msgN)
|
||
this.triggerData = msgN;
|
||
if (temp.length != 0) {
|
||
for (let i = 0; i < msgN.length; i++) {
|
||
detId.push(msgN[i].det_id);
|
||
}
|
||
document.getElementById('mapModule').contentWindow.getChuFa(JSON.stringify(detId));
|
||
}
|
||
} catch (error) { }
|
||
break;
|
||
case 'trigger-' + this.$route.query.id:
|
||
try {
|
||
// console.log("trigger_msgN",message)
|
||
const utf8decoder = new TextDecoder();
|
||
const u8arr = new Uint8Array(message);
|
||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||
var detId = [];
|
||
const msgN = JSON.parse(temp);
|
||
// console.log("trigger_msgN",msgN)
|
||
this.triggerListData = msgN;
|
||
} catch (error) { }
|
||
break;
|
||
case 'cycle_time-' + this.$route.query.id:
|
||
try {
|
||
// console.log("trigger_msgN",message)
|
||
const utf8decoder = new TextDecoder();
|
||
const u8arr = new Uint8Array(message);
|
||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||
var detId = [];
|
||
const msgN = JSON.parse(temp);
|
||
this.cycleTimeData = msgN;
|
||
} catch (error) { }
|
||
break;
|
||
case 'cycle_statistics-' + this.$route.query.id:
|
||
try {
|
||
// console.log("trigger_msgN",message)
|
||
const utf8decoder = new TextDecoder();
|
||
const u8arr = new Uint8Array(message);
|
||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||
var detId = [];
|
||
const msgN = JSON.parse(temp);
|
||
this.cycleStatisticsData = msgN;
|
||
|
||
// this.cycleStatisticsData = msgN;
|
||
|
||
|
||
} catch (error) { }
|
||
break;
|
||
}
|
||
this.receiveNews = '';
|
||
},
|
||
// handleClick(tab, event) {
|
||
// console.log(tab, event);
|
||
// },
|
||
changeCompany(val) {
|
||
console.log('val', val);
|
||
if (val == '小时') {
|
||
this.max = '24';
|
||
} else {
|
||
this.max = '100';
|
||
}
|
||
},
|
||
//初始化unity
|
||
OnSceneN() {
|
||
var ip = window.location.host;
|
||
this.ipData = 'http://' + ip.split(':')[0] + ':5000';
|
||
// document.getElementById('mapModule').contentWindow.getIpData(this.ipData);
|
||
document.getElementById('mapModule').contentWindow.getIpData('http://172.16.1.168:5000');
|
||
if (this.$route.query.type == '离线视频') {
|
||
document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));
|
||
}
|
||
document
|
||
.getElementById('mapModule')
|
||
.contentWindow.postVideoId(JSON.stringify(this.$route.query.id + ',' + this.$route.query.type));
|
||
},
|
||
//删除图形成功获取数据
|
||
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.componentId = id;
|
||
this.componentForm.componentType = type;
|
||
this.componentTitle = type;
|
||
getComponentData({ AnalogAreaComponentId: id }).then(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;
|
||
this.componentForm.cycleInterval = parseInt(res.data.data.cycleInterval);
|
||
this.componentForm.startSectionIds = res.data.data.startSectionIds;
|
||
// 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;
|
||
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;
|
||
}
|
||
});
|
||
});
|
||
}
|
||
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 = ['机动车', '非机动车', '行人'];
|
||
}
|
||
console.log('this.componentForm', this.componentForm);
|
||
}
|
||
});
|
||
},
|
||
//修改模拟区组件、图形
|
||
getSimulationAreaEdit(id, type, componentType, name, number) {
|
||
console.log('number', number);
|
||
this.numberNew = number;
|
||
if (type == '图形') {
|
||
this.form.id = id;
|
||
this.form.name = name;
|
||
this.form.type = componentType;
|
||
this.startFigureName = name;
|
||
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.componentId = id;
|
||
this.componentForm.componentType = componentType;
|
||
this.componentTitle = componentType;
|
||
getComponentData({ AnalogAreaComponentId: id }).then(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);
|
||
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
|
||
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) {
|
||
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) {
|
||
console.log('图形类型', item);
|
||
console.log('初始图形名称', index);
|
||
this.startFigureName = index;
|
||
console.log('图形位置', indexNew);
|
||
this.dialogFormVisible = true;
|
||
this.form.name = index;
|
||
this.form.type = this.figureType(item);
|
||
this.form.coordinate = indexNew;
|
||
this.form.id = '';
|
||
this.title = this.figureType(item);
|
||
},
|
||
//双击图形修改图形名称弹框
|
||
getModifyTheNameN(data, number) {
|
||
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];
|
||
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 (form.id == '') {
|
||
let formData = new FormData();
|
||
if (form.type == '断面') {
|
||
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);
|
||
} else if (form.type == '区域') {
|
||
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("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));
|
||
document
|
||
.getElementById('mapModule')
|
||
.contentWindow.postFigureName(
|
||
JSON.stringify(res.data.data + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew)
|
||
);
|
||
|
||
this.dialogFormVisible = false;
|
||
} else {
|
||
this.$message({
|
||
message: res.data.msg,
|
||
type: 'warning'
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
//编辑
|
||
let formData = new FormData();
|
||
if (form.type == '断面') {
|
||
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);
|
||
} else if (form.type == '区域') {
|
||
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);
|
||
} 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);
|
||
document
|
||
.getElementById('mapModule')
|
||
.contentWindow.postFigureName(
|
||
JSON.stringify(form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew)
|
||
);
|
||
this.dialogFormVisible = false;
|
||
} else {
|
||
this.$message({
|
||
message: res.data.msg,
|
||
type: 'warning'
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
//新增编辑组件取消
|
||
onSubmitComponent(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'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
//新增编辑组件取消
|
||
closeComponent(componentForm) {
|
||
this.component = false;
|
||
this.componentForm = {
|
||
//单位
|
||
company: '',
|
||
componentName: '',
|
||
componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0',
|
||
//周期间隔
|
||
cycleInterval: '',
|
||
startSectionIds: '',
|
||
startSectionNames: '',
|
||
endSectionIds: '',
|
||
endSectionNames: '',
|
||
endValue: '',
|
||
//展现形式
|
||
presentationForm: '',
|
||
presentation: [],
|
||
startValue: '',
|
||
timeMode: '',
|
||
type: [],
|
||
startSection: [],
|
||
endSection: [],
|
||
componentType: '',
|
||
typeFiltering: '',
|
||
typeData: []
|
||
};
|
||
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();
|
||
}
|
||
},
|
||
closeComponentForm() {
|
||
console.log("111")
|
||
this.component = false;
|
||
|
||
document.getElementById('mapModule').contentWindow.editComponent('');
|
||
},
|
||
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 = [];
|
||
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 = [];
|
||
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');
|
||
});
|
||
}
|
||
},
|
||
components: {
|
||
editModal,
|
||
analysisConfiguration,
|
||
dataBoard
|
||
}
|
||
};
|
||
</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
|
||
/* right:auto;; */
|
||
;
|
||
}
|
||
|
||
.formBox {
|
||
margin-top: 20px;
|
||
margin-left: 20px;
|
||
}
|
||
|
||
/* .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; */
|
||
}
|
||
|
||
.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;
|
||
}
|
||
</style>
|