20230224
This commit is contained in:
commit
fa47a8280c
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -3,9 +3,9 @@
|
|||
<div class="tableTitle">
|
||||
<div>
|
||||
<span
|
||||
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
|
||||
></span>
|
||||
<span style="font-size:18px;">{{this.componentName + '-' + this.chartName + '-' + '曲线图'+'-'+status, }}</span>
|
||||
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"></span>
|
||||
<span style="font-size:18px;">{{ this.componentName + '-' + this.chartName + '-' + '曲线图' + '-' + status,
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lineChart" ref="lineChart" style="width: 100%; height: 300px"></div>
|
||||
|
|
@ -67,12 +67,14 @@ export default {
|
|||
created() {
|
||||
// console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
|
||||
},
|
||||
|
||||
methods: {
|
||||
drawLine() {
|
||||
let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
|
||||
if (myChart == null) {
|
||||
myChart = this.$echarts.init(this.$refs.lineChart);
|
||||
}
|
||||
// myChart.showLoading() //开启loading
|
||||
let option = {
|
||||
// title: {
|
||||
// show: true,
|
||||
|
|
@ -136,12 +138,13 @@ export default {
|
|||
],
|
||||
series: this.series
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.setOption(option) //再设置配置
|
||||
// myChart.hideLoading()
|
||||
// myChart.setOption(option);
|
||||
// window.onresize = () => { // 根据窗口大小变化图表自适应
|
||||
// myChart.resize();
|
||||
// };
|
||||
window.addEventListener('resize', function() {
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
|
@ -183,9 +186,9 @@ export default {
|
|||
confine: true
|
||||
};
|
||||
this.series[0].name = '总量';
|
||||
console.log("折线图",newVal)
|
||||
console.log('折线图', newVal);
|
||||
// 映射出类型数组
|
||||
let arr = newVal.map(function(ele) {
|
||||
let arr = newVal.map(function (ele) {
|
||||
if (ele.type_data != null) {
|
||||
return ele.type_data;
|
||||
}
|
||||
|
|
@ -196,23 +199,32 @@ export default {
|
|||
mapN.push(arr[t][i]);
|
||||
}
|
||||
}
|
||||
var lineArr = [];
|
||||
// 遍历需要多少条类型折线
|
||||
if (this.typeValue) {
|
||||
console.log("this.typeValue.type_data",this.typeValue.type_data)
|
||||
if (this.typeValue.type_data!=undefined) {
|
||||
this.typeValue.type_data.forEach(ele => {
|
||||
lineArr.push({
|
||||
name: ele.name,
|
||||
type: 'line',
|
||||
data: [],
|
||||
smooth: true
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 筛选类型的数量
|
||||
var lineArr = [{
|
||||
name: '机动车',
|
||||
type: 'line',
|
||||
data: [],
|
||||
smooth: true
|
||||
}, {
|
||||
name: '非机动车',
|
||||
type: 'line',
|
||||
data: [],
|
||||
smooth: true
|
||||
}, {
|
||||
name: '行人',
|
||||
type: 'line',
|
||||
data: [],
|
||||
smooth: true
|
||||
}];
|
||||
// if (newVal[0].type_data != undefined) {
|
||||
// newVal[0].type_data.forEach(ele => {
|
||||
// lineArr.push({
|
||||
// name: ele.name,
|
||||
// type: 'line',
|
||||
// data: [],
|
||||
// smooth: true
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
mapN.forEach(ele => {
|
||||
if (ele.name == '机动车') {
|
||||
lineArr[0].data.push(ele.quantity);
|
||||
|
|
@ -227,9 +239,9 @@ export default {
|
|||
}
|
||||
// 总和数量
|
||||
let mapNR1 = [];
|
||||
newVal.map(function(ele) {
|
||||
newVal.map(function (ele) {
|
||||
if (ele.type_data != null) {
|
||||
var sum = ele.type_data.reduce(function(prev, cur) {
|
||||
var sum = ele.type_data.reduce(function (prev, cur) {
|
||||
return cur.quantity + prev;
|
||||
}, 0);
|
||||
mapNR1.push(sum);
|
||||
|
|
@ -257,7 +269,7 @@ export default {
|
|||
return ele.in_flow + ele.out_flow;
|
||||
});
|
||||
} else if (this.title == '车头时距') {
|
||||
console.log("车头时距",newVal)
|
||||
console.log('车头时距', newVal);
|
||||
this.tooltip = {
|
||||
formatter: '{a} {b}:{c}/s',
|
||||
show: true,
|
||||
|
|
@ -266,19 +278,21 @@ export default {
|
|||
this.series[0].data = newVal.map(val => {
|
||||
return val.headway;
|
||||
});
|
||||
} else if (this.title == '排队数') {
|
||||
console.log("排队数",newVal)
|
||||
} else if (this.title == '排队数' && this.status == '触发') {
|
||||
this.series[0].data = newVal.map(val => {
|
||||
return val.n_queue;
|
||||
});
|
||||
|
||||
} else if (this.title == '排队数' && this.status == '周期统计') {
|
||||
this.series[0].data = newVal.map(val => {
|
||||
return val.ave_queue;
|
||||
});
|
||||
} else if (this.title == '检测数') {
|
||||
this.series[0].data = newVal.map(val => {
|
||||
return val.n_stay;
|
||||
});
|
||||
} else if (this.title == '延误') {
|
||||
this.series[0].data = newVal.map(val => {
|
||||
return val.ave_delay;
|
||||
return val.ave_delay;
|
||||
});
|
||||
} else if (this.title == '拥堵') {
|
||||
this.series[0].data = newVal.map(val => {});
|
||||
|
|
@ -289,10 +303,13 @@ export default {
|
|||
this.drawLine();
|
||||
});
|
||||
}
|
||||
|
||||
this.drawLine()
|
||||
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
<div v-if="msg">
|
||||
<!-- 触发 -->
|
||||
<el-table :data="msg" style="width: 100%" v-if="type == '触发' ">
|
||||
<el-table :data="msg" style="width: 100%" v-if="triggerType == '触发' ">
|
||||
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
|
||||
<!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
|
||||
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
</el-table-column>
|
||||
<el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column>
|
||||
</el-table>
|
||||
<el-table :data="msg" style="width: 100%" v-if="type == '周期时刻' ">
|
||||
<el-table :data="msg" style="width: 100%" v-if="triggerType == '周期时刻' ">
|
||||
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
|
||||
<!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
|
||||
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
<el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column>
|
||||
</el-table>
|
||||
<!-- 周期统计 -->
|
||||
<el-table :data="msg" style="width: 100%" v-if="type == '周期统计'">
|
||||
<el-table :data="msg" style="width: 100%" v-if="triggerType == '周期统计'">
|
||||
<!-- <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
|
||||
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
||||
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
|
||||
|
|
@ -161,7 +161,7 @@ export default {
|
|||
return [];
|
||||
}
|
||||
},
|
||||
type: {
|
||||
triggerType: {
|
||||
type: String
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
<!-- 触发 -->
|
||||
<div v-if="msg">
|
||||
<el-table :data="msg" style="width: 100%" v-if="type == '触发'">
|
||||
<el-table :data="msg" style="width: 100%" v-if="triggerType == '触发'">
|
||||
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column>
|
||||
<el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
|
||||
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
|
||||
|
||||
<!-- 周期统计 -->
|
||||
<el-table :data="msg" style="width: 100%" v-if="type == '周期统计'">
|
||||
<el-table :data="msg" style="width: 100%" v-if="triggerType == '周期统计'">
|
||||
<el-table-column align="center" prop="gate_id" label="断面编号"></el-table-column>
|
||||
<el-table-column align="center" prop="name" label="断面名称"></el-table-column>
|
||||
<el-table-column align="center" prop="timestamp" label="时间戳"></el-table-column>
|
||||
|
|
@ -128,7 +128,7 @@ export default {
|
|||
return [];
|
||||
}
|
||||
},
|
||||
type: {
|
||||
triggerType: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
<template
|
||||
><!-- 触发类型 -->
|
||||
<div class="setion" v-if="isRefer">
|
||||
<template><!-- 触发类型 -->
|
||||
<div class="setion">
|
||||
<p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p>
|
||||
<!-- 触发数据数值渲染 -->
|
||||
<div class="typeContent" v-if="triggerType == '触发' || '周期时刻'">
|
||||
<div v-if="dataArr && dataArr.length != 0 && dataArr!=undefined">
|
||||
<div v-if="title == '类型'" style="display:flex">
|
||||
<el-card v-for="(n, i) in typeValue.type_data" :key="i" style="width: 150px; margin-bottom: 20px; text-align: center">
|
||||
<el-card v-for="(n, i) in typeValue.type_data" :key="i"
|
||||
style="width: 150px; margin-bottom: 20px; text-align: center">
|
||||
<div>
|
||||
<span style="font-size: 15px;">{{ n.name }}</span
|
||||
><br />
|
||||
<span style="font-size: 15px;">{{ n.name }}</span><br />
|
||||
<span style="font-size: 30px; font-weight: bold">{{ n.quantity }}</span>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -77,10 +76,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
|
||||
<tableShow :msg="dataArr" :type="triggerType" />
|
||||
<tableShow :msg="dataArr" :triggerType="triggerType" />
|
||||
</div>
|
||||
<div v-if="pageType == '区域'">
|
||||
<regionTable :msg="dataArr" :type="triggerType" />
|
||||
<regionTable :msg="dataArr" :triggerType="triggerType" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="border" v-if="echartArr.includes('曲线图')">
|
||||
|
|
@ -98,40 +97,18 @@
|
|||
</div>
|
||||
<div class="border" v-if="echartArr.includes('饼状图')">
|
||||
<detailDialog />
|
||||
<pieChart
|
||||
:componentName="componentName"
|
||||
:chartName="chartName"
|
||||
:pageType="pageType"
|
||||
:list="dataArr"
|
||||
:status="triggerType"
|
||||
:title="title"
|
||||
:typeValue="typeValue"
|
||||
/>
|
||||
<pieChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="dataArr"
|
||||
:status="triggerType" :title="title" :typeValue="typeValue" />
|
||||
</div>
|
||||
<div class="border" v-if="echartArr.includes('均值图')">
|
||||
<detailDialog />
|
||||
<avgChart
|
||||
ref="avgRefChart"
|
||||
:componentName="componentName"
|
||||
:chartName="chartName"
|
||||
:pageType="pageType"
|
||||
:list="dataArr"
|
||||
:status="triggerType"
|
||||
:title="title"
|
||||
:typeValue="typeValue"
|
||||
/>
|
||||
<avgChart ref="avgRefChart" :componentName="componentName" :chartName="chartName" :pageType="pageType"
|
||||
:list="dataArr" :status="triggerType" :title="title" :typeValue="typeValue" />
|
||||
</div>
|
||||
<div class="border" v-if="echartArr.includes('直方图')">
|
||||
<detailDialog />
|
||||
<barChart
|
||||
:componentName="componentName"
|
||||
:chartName="chartName"
|
||||
:pageType="pageType"
|
||||
:list="dataArr"
|
||||
:status="triggerType"
|
||||
:title="title"
|
||||
:typeValue="typeValue"
|
||||
/>
|
||||
<barChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="dataArr"
|
||||
:status="triggerType" :title="title" :typeValue="typeValue" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -171,7 +148,9 @@ export default {
|
|||
queue:'',
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 计算类型的数值
|
||||
getNewQueue(dataArr){
|
||||
|
|
@ -194,7 +173,7 @@ export default {
|
|||
},
|
||||
|
||||
computed: {},
|
||||
mounted() {},
|
||||
mounted() { },
|
||||
watch: {
|
||||
// 监听触发数据
|
||||
dataArr: {
|
||||
|
|
@ -230,6 +209,7 @@ export default {
|
|||
margin-bottom: 5px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.typeContent {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -528,6 +528,7 @@ destroyed: function () {
|
|||
});
|
||||
})
|
||||
this.videoList=arr
|
||||
this.videoTypeForm.videoType = this.videoList[0].type
|
||||
if(this.videoList.length=='0'){
|
||||
this.videoTypeShow = true
|
||||
}else{
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div ref="box" class="box">
|
||||
<el-empty v-show="componentList.length == 0" :image-size="400"></el-empty>
|
||||
<el-empty v-show="sectionData.length == 0" :image-size="400"></el-empty>
|
||||
<!-- <p class="title" style="margin-bottom: 20px;font-size: 20px;font-weight: 400;">数据看板</p> -->
|
||||
<el-scrollbar class="scrollbar">
|
||||
<div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'">
|
||||
|
|
@ -371,8 +371,11 @@ export default {
|
|||
typeCycleStatistics: {}
|
||||
};
|
||||
},
|
||||
// beforeCeated(){
|
||||
|
||||
// },
|
||||
created() {
|
||||
this.getNew()
|
||||
// this.getNew()
|
||||
},
|
||||
methods: {
|
||||
getNew(){
|
||||
|
|
@ -386,8 +389,8 @@ export default {
|
|||
});
|
||||
},
|
||||
siftData() {
|
||||
// this.sectionArr=[]
|
||||
// this.sectionData=[]
|
||||
this.sectionArr=[]
|
||||
this.sectionData=[]
|
||||
this.componentList.forEach(val => {
|
||||
// var newSectionArr = []
|
||||
// newSectionArr.push(val.combinationName)
|
||||
|
|
@ -408,8 +411,6 @@ export default {
|
|||
});
|
||||
return item;
|
||||
});
|
||||
console.log( "this.sectionData",this.sectionData)
|
||||
// = newSectionData
|
||||
|
||||
},
|
||||
// 组件图标点击下拉事件
|
||||
|
|
@ -433,19 +434,19 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
channge(oldVal, newVal){
|
||||
console.log("old",oldVal)
|
||||
console.log("newVal",newVal)
|
||||
if(oldVal=='second'){
|
||||
this.sectionArr=[]
|
||||
this.sectionData=[]
|
||||
this.getNew()
|
||||
}else if(newVal=='second'){
|
||||
this.sectionArr=[]
|
||||
this.sectionData=[]
|
||||
this.getNew()
|
||||
}
|
||||
}
|
||||
// channge(oldVal, newVal){
|
||||
// console.log("old",oldVal)
|
||||
// console.log("newVal",newVal)
|
||||
// if(oldVal=='second'){
|
||||
// this.sectionArr=[]
|
||||
// this.sectionData=[]
|
||||
// this.getNew()
|
||||
// }else if(newVal=='second'){
|
||||
// this.sectionArr=[]
|
||||
// this.sectionData=[]
|
||||
// this.getNew()
|
||||
// }
|
||||
// }
|
||||
|
||||
// 触发数据的类型数值
|
||||
},
|
||||
|
|
@ -456,7 +457,7 @@ export default {
|
|||
handler(newVal, oldVal) {},
|
||||
immediate: true
|
||||
},
|
||||
activeName:'channge',
|
||||
// activeName:'channge',
|
||||
// 处理过的触发数据
|
||||
triggerListData: {
|
||||
handler(newVal) {
|
||||
|
|
@ -492,8 +493,7 @@ export default {
|
|||
cycleTimeData: {
|
||||
handler(newVal) {
|
||||
// 监听到打印周期时刻数据
|
||||
console.log(newVal, '440');
|
||||
if (newVal.length != 0) {
|
||||
if (newVal.length != 0 && this.sectionData) {
|
||||
this.componentList.forEach(ele => {
|
||||
if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
|
||||
ele.cycleTimeData = [];
|
||||
|
|
@ -529,9 +529,8 @@ export default {
|
|||
// }
|
||||
cycleStatisticsData: {
|
||||
handler(newVal) {
|
||||
console.log(newVal, '周期统计');
|
||||
|
||||
if (newVal.length != 0) {
|
||||
if (newVal.length != 0 && this.sectionData) {
|
||||
this.componentList.forEach(ele => {
|
||||
if (ele.cycleStatisticsData == undefined && ele.timeMode == '周期统计') {
|
||||
ele.cycleStatisticsData = [];
|
||||
|
|
|
|||
|
|
@ -3,29 +3,18 @@
|
|||
<!-- <div class="container"> -->
|
||||
<div>
|
||||
<!-- <el-tabs type="border-card" v-model="activeName" tab-position="left"> -->
|
||||
<el-tabs type="border-card" v-model="activeName">
|
||||
<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 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
|
||||
:activeName="activeName"
|
||||
:triggerData="triggerData"
|
||||
:triggerListData="triggerListData"
|
||||
:cycleTimeData="cycleTimeData"
|
||||
:cycleStatisticsData="cycleStatisticsData"
|
||||
></dataBoard>
|
||||
<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>
|
||||
|
|
@ -37,31 +26,12 @@
|
|||
</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
|
||||
>
|
||||
<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%"
|
||||
>
|
||||
<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="组件名称">
|
||||
|
|
@ -82,8 +52,9 @@
|
|||
</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-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>
|
||||
|
|
@ -93,14 +64,11 @@
|
|||
<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-form-item label="数值筛选：" v-if="
|
||||
componentForm.componentType != 'OD' &&
|
||||
componentForm.componentType != '类型' &&
|
||||
componentForm.componentType != '流量'
|
||||
">
|
||||
<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>
|
||||
|
|
@ -112,22 +80,16 @@
|
|||
</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 != '流量'
|
||||
"
|
||||
></el-option>
|
||||
<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>
|
||||
|
|
@ -147,7 +109,9 @@
|
|||
<el-option label="分钟" value="分钟"></el-option>
|
||||
<el-option label="小时" value="小时"></el-option>
|
||||
</el-select>
|
||||
<el-slider v-model="componentForm.cycleInterval" :max="max"> </el-slider>
|
||||
<!-- <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> -->
|
||||
|
|
@ -168,11 +132,15 @@
|
|||
<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="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 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>
|
||||
|
|
@ -214,7 +182,8 @@ var client;
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
max: '',
|
||||
max:'100',
|
||||
min:'1',
|
||||
receiveNews: '',
|
||||
topicSends: ['img0', 'stream0', 'trajectory0', 'detection0'],
|
||||
trajectory: false, //轨迹
|
||||
|
|
@ -280,7 +249,7 @@ export default {
|
|||
componentName: '',
|
||||
componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0',
|
||||
//周期间隔
|
||||
cycleInterval: '',
|
||||
cycleInterval: 1,
|
||||
startSectionIds: '',
|
||||
startSectionNames: '',
|
||||
endSectionIds: '',
|
||||
|
|
@ -370,12 +339,15 @@ export default {
|
|||
videoType: '实时视频'
|
||||
},
|
||||
description: '请等待排队',
|
||||
ipData: ''
|
||||
ipData: '',
|
||||
|
||||
|
||||
componentList:[]
|
||||
};
|
||||
},
|
||||
|
||||
//离开当前页面后执行
|
||||
destroyed: function() {
|
||||
destroyed: function () {
|
||||
//console.log("离开当前页")
|
||||
// client.publish('msg_stream',JSON.stringify({"msg_flag":-1}))
|
||||
//client.end();
|
||||
|
|
@ -420,8 +392,18 @@ export default {
|
|||
// }
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
mounted() { },
|
||||
methods: {
|
||||
|
||||
// 数据看板的标签点击
|
||||
handleClick: function(tab, event) {
|
||||
var that = this
|
||||
if(tab._props.name=='second'){
|
||||
that.$nextTick(()=>{
|
||||
that.$refs.dataBoardRef.getNew()
|
||||
})
|
||||
}
|
||||
},
|
||||
/** 创建mqtt */
|
||||
createMqtt() {
|
||||
//创建链接，接收数据
|
||||
|
|
@ -573,7 +555,7 @@ export default {
|
|||
} else {
|
||||
this.analysisConfigurationdata = msg;
|
||||
}
|
||||
} catch (error) {}
|
||||
} catch (error) { }
|
||||
break;
|
||||
// 树结构
|
||||
case 'stream' + this.number:
|
||||
|
|
@ -584,7 +566,7 @@ export default {
|
|||
const msg = JSON.parse(temp);
|
||||
// console.log("msg",msg)
|
||||
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
|
||||
} catch (error) {}
|
||||
} catch (error) { }
|
||||
break;
|
||||
// 控制台输出
|
||||
case 'trajectory' + this.number:
|
||||
|
|
@ -595,7 +577,7 @@ export default {
|
|||
const msg = JSON.parse(temp);
|
||||
// console.log("msg",msg)
|
||||
document.getElementById('mapModule').contentWindow.getGuiJi(JSON.stringify(msg));
|
||||
} catch (error) {}
|
||||
} catch (error) { }
|
||||
break;
|
||||
// 触发
|
||||
case 'detection' + this.number:
|
||||
|
|
@ -613,7 +595,7 @@ export default {
|
|||
}
|
||||
document.getElementById('mapModule').contentWindow.getChuFa(JSON.stringify(detId));
|
||||
}
|
||||
} catch (error) {}
|
||||
} catch (error) { }
|
||||
break;
|
||||
case 'trigger-' + this.$route.query.id:
|
||||
try {
|
||||
|
|
@ -623,9 +605,9 @@ export default {
|
|||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
var detId = [];
|
||||
const msgN = JSON.parse(temp);
|
||||
// console.log("trigger_msgN",msgN)
|
||||
// console.log("trigger_msgN",msgN)
|
||||
this.triggerListData = msgN;
|
||||
} catch (error) {}
|
||||
} catch (error) { }
|
||||
break;
|
||||
case 'cycle_time-' + this.$route.query.id:
|
||||
try {
|
||||
|
|
@ -636,7 +618,7 @@ export default {
|
|||
var detId = [];
|
||||
const msgN = JSON.parse(temp);
|
||||
this.cycleTimeData = msgN;
|
||||
} catch (error) {}
|
||||
} catch (error) { }
|
||||
break;
|
||||
case 'cycle_statistics-' + this.$route.query.id:
|
||||
try {
|
||||
|
|
@ -646,8 +628,8 @@ export default {
|
|||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
var detId = [];
|
||||
const msgN = JSON.parse(temp);
|
||||
this.cycleStatistics = msgN;
|
||||
} catch (error) {}
|
||||
this.cycleStatisticsData = msgN;
|
||||
} catch (error) { }
|
||||
break;
|
||||
}
|
||||
this.receiveNews = '';
|
||||
|
|
@ -718,7 +700,7 @@ export default {
|
|||
}
|
||||
}
|
||||
this.componentForm.componentParameterId = res.data.data.componentParameterId;
|
||||
this.componentForm.cycleInterval = res.data.data.cycleInterval;
|
||||
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;
|
||||
|
|
@ -820,7 +802,9 @@ export default {
|
|||
}
|
||||
this.componentForm.componentName = res.data.data.componentName;
|
||||
this.componentForm.componentParameterId = res.data.data.componentParameterId;
|
||||
this.componentForm.cycleInterval = res.data.data.cycleInterval;
|
||||
this.componentForm.cycleInterval = parseInt(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;
|
||||
|
|
@ -1169,7 +1153,7 @@ export default {
|
|||
closeComponentForm() {
|
||||
console.log("111")
|
||||
this.component = false;
|
||||
|
||||
|
||||
document.getElementById('mapModule').contentWindow.editComponent('');
|
||||
},
|
||||
closeForm(form) {
|
||||
|
|
@ -1271,19 +1255,25 @@ export default {
|
|||
}
|
||||
|
||||
.content-box::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
display: none;
|
||||
/* Chrome Safari */
|
||||
}
|
||||
|
||||
.new-dialog {
|
||||
width: 49%;
|
||||
height: 11%;
|
||||
left: calc(24vw);
|
||||
top: 90vh;
|
||||
bottom: 0 /* right:auto;; */;
|
||||
bottom: 0
|
||||
/* right:auto;; */
|
||||
;
|
||||
}
|
||||
|
||||
.formBox {
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
/* .new-dialog .el-dialog {
|
||||
width:100%!important;
|
||||
margin: 0vh auto !important;
|
||||
|
|
@ -1294,13 +1284,17 @@ export default {
|
|||
margin: 0 auto 0px !important;
|
||||
/* margin-top: 0vh!important; */
|
||||
}
|
||||
|
||||
.new-dialog .el-dialog__wrapper::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
display: none;
|
||||
/* Chrome Safari */
|
||||
}
|
||||
|
||||
.new-dialog .customWidth {
|
||||
width: 100%;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.mapModuleApp {
|
||||
/* width:100%; */
|
||||
width: 1600px;
|
||||
|
|
@ -1308,6 +1302,7 @@ export default {
|
|||
display: inline-block;
|
||||
border: 1px soild #eee;
|
||||
}
|
||||
|
||||
.el-drawer.btt,
|
||||
.el-drawer.ttb {
|
||||
width: 100%;
|
||||
|
|
@ -1325,11 +1320,13 @@ export default {
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.videoAnalysis {
|
||||
position: absolute;
|
||||
right: 200px;
|
||||
top: 17px;
|
||||
}
|
||||
|
||||
.trafficAnalysis {
|
||||
position: absolute;
|
||||
right: 100px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue