1144 lines
44 KiB
Vue
1144 lines
44 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">
|
||
<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'></iframe>
|
||
<!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none"
|
||
ref="iframe"></iframe> -->
|
||
</div>
|
||
<!-- <div style="width:20%;height:100%;display:inline-block;border:1px soild #eee;padding:15px;">
|
||
|
||
<el-button type="primary" @click="dialogFormVisible = true">断面组件</el-button>
|
||
<el-button type="primary" @click="areaComponent = true">区域组件</el-button>
|
||
<el-button type="primary" @click="trajectory=true">轨迹组件</el-button>
|
||
<el-button type="primary" @click="speed = true">速度组件</el-button>
|
||
<el-button type="primary" @click="flow = true">流量组件</el-button>
|
||
<el-button type="primary" @click="indexModule = true">车头时距</el-button>
|
||
<el-button type="primary" @click="indexModule = true">排队数</el-button>
|
||
<el-button type="primary" @click="indexModule = true">检测数</el-button>
|
||
<el-button type="primary" @click="indexModule = true">延误</el-button>
|
||
<el-button type="primary" @click="indexModule = true">拥堵</el-button>
|
||
|
||
</div> -->
|
||
|
||
</el-tab-pane>
|
||
<el-tab-pane label="数据看板" name="second">
|
||
<dataBoard :activeName="activeName" :triggerData="triggerData"></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>
|
||
<!-- <div style="width:30%;height:300px;display:inline-block">
|
||
<img :src='imgUrl' width="100%" height="100%"/>
|
||
</div>
|
||
<div style="width:30%;height:300px;display:inline-block">
|
||
<img :src='imgUrl1' width="100%" height="100%"/>
|
||
</div>
|
||
<div style="width:30%;height:300px;display:inline-block">
|
||
<img :src='imgUrl2' width="100%" height="100%"/>
|
||
</div>
|
||
<div style="width:30%;height:300px;display:inline-block">
|
||
<img :src='imgUrl3' width="100%" height="100%"/>
|
||
</div>
|
||
<div style="width:30%;height:300px;display:inline-block">
|
||
<img :src='imgUrl4' width="100%" height="100%"/>
|
||
</div>
|
||
<div style="width:30%;height:300px;display:inline-block">
|
||
<img :src='imgUrl5' width="100%" height="100%"/>
|
||
</div> -->
|
||
|
||
</div>
|
||
<!-- <div id="dialog" style="height:500px"> -->
|
||
<!-- <el-dialog class="new-dialog" :title="title+'组件'" :modal="false" :close-on-click-modal="false" :visible.sync="dialogFormVisible" v-alterELDialogMarginTop="{marginTop:'0vh'}" customClass='customWidth' width="100%" @close='closeForm(form)'>
|
||
<el-form ref="form" :model="form" label-width="80px">
|
||
<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 label="速度阈值" v-if="form.type=='区域'">
|
||
<el-input-number v-model="form.StoppingSpeed" :precision="1" :step="0.1"></el-input-number>
|
||
</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>
|
||
|
||
</el-dialog> -->
|
||
<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 label="速度阈值" v-if="form.type=='区域'">
|
||
<el-input-number v-model="form.StoppingSpeed" :precision="1" :step="0.1"></el-input-number>
|
||
</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">
|
||
<el-form ref="form" :model="componentForm" label-width="150px" @close='closeComponentForm()'>
|
||
<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 label="小汽车" name="type" ></el-checkbox>
|
||
<el-checkbox label="公交车" name="type" ></el-checkbox>
|
||
<el-checkbox label="卡车" name="type" ></el-checkbox>
|
||
<el-checkbox label="非机动车" name="type" ></el-checkbox>
|
||
<el-checkbox label="行人" name="type" ></el-checkbox> -->
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<el-form-item label="数值筛选：" v-if="componentForm.componentType!='OD'">
|
||
<el-input-number v-model="componentForm.startValue"></el-input-number>
|
||
<el-input-number v-model="componentForm.endValue" style="margin-left:5%"></el-input-number>
|
||
</el-form-item>
|
||
<el-form-item label="时间模式：">
|
||
<el-select v-model="componentForm.timeMode" placeholder="请选择时间模式">
|
||
<el-option label="触发" value="touch"></el-option>
|
||
<el-option label="周期时刻" value="timeing" v-if="componentForm.componentType!='排队数'&&componentForm.componentType!='检测数'&&componentForm.componentType!='延误'&&componentForm.componentType!='拥堵'"></el-option>
|
||
<el-option label="周期统计" value="date" 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="周期间隔：">
|
||
<!-- <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-select>
|
||
<el-slider v-model="componentForm.cycleInterval" :max="max">
|
||
</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!='拥堵'"></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-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} 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;
|
||
// var topicSends; //订阅的topic 例如：["Time1", "EngineMain1", "Console1", "Location1"]
|
||
// //判断
|
||
// var number = 1
|
||
export default {
|
||
data() {
|
||
return {
|
||
max:'',
|
||
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,
|
||
//判断模拟区，画布区
|
||
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: "",
|
||
startSectionIds: "",
|
||
startSectionNames: "",
|
||
endSectionIds: "",
|
||
endSectionNames: "",
|
||
endValue: "",
|
||
//展现形式
|
||
presentationForm: "",
|
||
presentation:[],
|
||
startValue: "",
|
||
timeMode: "触发",
|
||
type:[],
|
||
startSection:[],
|
||
endSection:[],
|
||
componentType: "",
|
||
typeFiltering:'',
|
||
typeData:[]
|
||
|
||
},
|
||
typeData:["小汽车","公交车","卡车","非机动车","行人"],
|
||
//展现形式
|
||
presentation:['数值','表格','时间曲线图','均值图'],
|
||
|
||
trackForm:{
|
||
name:""
|
||
},
|
||
// dateTime: this.$moment(new Date()).format("LL"),
|
||
nowTime: "",
|
||
// weekday: this.$moment().format("dddd"),
|
||
ins: 0,
|
||
imgUrl: '',
|
||
imgUrl1: '',
|
||
imgUrl2: '',
|
||
imgUrl3: '',
|
||
imgUrl4: '',
|
||
imgUrl5: '',
|
||
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:[]
|
||
};
|
||
},
|
||
|
||
//离开当前页面后执行
|
||
destroyed: function () {
|
||
console.log("离开当前页")
|
||
// client.publish('msg_stream',JSON.stringify({"msg_flag":-1}))
|
||
client.end();
|
||
},
|
||
created() {
|
||
window.getFigure = this.getFigureD;
|
||
window.getModifyTheName = this.getModifyTheNameN;
|
||
// window.getModifyTheName = this.getModifyTheNameN;
|
||
window.getSingleComponentId = this.getSingleComponentIdN;
|
||
window.getSimulationAreaEdit = this.getSimulationAreaEdit;
|
||
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
|
||
|
||
},
|
||
mounted() {
|
||
|
||
// this.testMqtt()
|
||
|
||
// this.getSingleComponentIdN()
|
||
this.componentForm.company = this.timeSelect[0].value;
|
||
this.createMqtt();
|
||
},
|
||
methods: {
|
||
/** 创建mqtt */
|
||
createMqtt() {
|
||
//创建链接，接收数据
|
||
this.topicSends = ['img'+this.number,'stream'+this.number, 'trajectory'+this.number, 'detection'+this.number]
|
||
// 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) {
|
||
|
||
}
|
||
});
|
||
},
|
||
//停止订阅mqtt
|
||
disConnect() {
|
||
if (client != null) {
|
||
client.unsubscribe(this.topicSends);
|
||
client = null;
|
||
}
|
||
},
|
||
/** 实时数据分类 */
|
||
realInfo(topic, message) {
|
||
switch (topic) {
|
||
// 接收托片
|
||
case "img0":
|
||
case "img1":
|
||
case "img2":
|
||
try {
|
||
const utf8decoder = new TextDecoder()
|
||
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'){
|
||
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
|
||
}else{
|
||
this.analysisConfigurationdata = msg
|
||
}
|
||
} catch (error) {}
|
||
break;
|
||
// 树结构
|
||
case "stream0":
|
||
case "stream1":
|
||
case "stream2":
|
||
try {
|
||
const utf8decoder1 = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder1.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp)
|
||
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
|
||
} catch (error) {}
|
||
break;
|
||
// 控制台输出
|
||
case "trajectory0":
|
||
case "trajectory1":
|
||
case "trajectory2":
|
||
case "trajectory3":
|
||
try {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
// console.log("message11",message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
// console.log("temp11",temp)
|
||
const msg = JSON.parse(temp)
|
||
// console.log("msg11",msg)
|
||
document.getElementById("mapModule").contentWindow.getGuiJi(JSON.stringify(msg))
|
||
} catch (error) {}
|
||
break;
|
||
// 触发
|
||
case "detection0":
|
||
case "detection1":
|
||
case "detection2":
|
||
try {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
// console.log("message",message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
// console.log("temp",temp)
|
||
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)
|
||
}
|
||
// console.log("detId",detId)
|
||
// const msg = detId
|
||
// console.log("msg",msg)
|
||
document.getElementById("mapModule").contentWindow.getChuFa(JSON.stringify(detId))
|
||
// document.getElementById("mapModule").contentWindow.getChuFa(detId)
|
||
}
|
||
|
||
} 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(){
|
||
document.getElementById("mapModule").contentWindow.postVideoId(JSON.stringify(this.$route.query.id))
|
||
},
|
||
// //新增组件根据组件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
|
||
}
|
||
if(res.data.data.timeMode!=''){
|
||
this.componentForm.timeMode = res.data.data.timeMode
|
||
}
|
||
// this.componentForm.componentName = res.data.data.componentName+'-'+type
|
||
this.componentForm.componentName = res.data.data.componentName
|
||
this.componentForm.componentParameterId = res.data.data.componentParameterId
|
||
this.componentForm.cycleInterval = res.data.data.cycleInterval
|
||
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.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(res.data.data.presentationForm!=''){
|
||
// var presentationN = []
|
||
// presentationN = res.data.data.presentationForm.split(',')
|
||
// this.componentForm.presentation = presentationN
|
||
// }
|
||
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
|
||
}
|
||
// this.componentForm.componentName = res.data.data.componentName+'-'+type
|
||
this.componentForm.componentName = res.data.data.componentName
|
||
this.componentForm.componentParameterId = res.data.data.componentParameterId
|
||
this.componentForm.cycleInterval = res.data.data.cycleInterval
|
||
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'
|
||
});
|
||
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'
|
||
});
|
||
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);
|
||
}
|
||
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))
|
||
document.getElementById("mapModule").contentWindow.closeEdit(JSON.stringify(form.type+','+form.id))
|
||
|
||
}else{
|
||
this.dialogFormVisible = false
|
||
document.getElementById("mapModule").contentWindow.delFigure()
|
||
}
|
||
|
||
},
|
||
closeComponentForm(){
|
||
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))
|
||
// document.getElementById("mapModule").contentWindow.closeEdit(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%;
|
||
}
|
||
</style>
|