chengdandan
/
TransFlow
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
luoshiwen 2023-02-22 21:49:46 +08:00
parent 7087614b09 390216761c
commit 0b52be6244
11 changed files with 229 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
node_modules/.cache/babel-loader/707c80c5cb9d3ec9ed91511d9d73326f.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/babel-loader/b84f2eff62cf6f6e1777fdc799b085d7.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/babel-loader/c90a7db1294db9fc3e3360c0ce4029f4.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/babel-loader/d36b985a450343bbaebc7d3929d30d4d.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/babel-loader/f33a3790ba493045db8997e3255aae8b.json generated vendored
View File

File diff suppressed because one or more lines are too long

95
src/components/chart/lineChart.vue
View File

@ -3,9 +3,9 @@
<div class="tableTitle"> <div class="tableTitle">
<div> <div>
<span <span
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;" style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"></span>
></span> <span style="font-size:18px;">{{ this.componentName + '-' + this.chartName + '-' + '曲线图' + '-' + status,
<span style="font-size:18px;">{{this.componentName + '-' + this.chartName + '-' + '曲线图'+'-'+status, }}</span> }}</span>
</div> </div>
</div> </div>
<div id="lineChart" ref="lineChart" style="width: 100%; height: 300px"></div> <div id="lineChart" ref="lineChart" style="width: 100%; height: 300px"></div>
@ -67,12 +67,14 @@ export default {
created() { created() {
// console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40'); // console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
}, },
methods: { methods: {
drawLine() { drawLine() {
let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart); let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
if (myChart == null) { if (myChart == null) {
myChart = this.$echarts.init(this.$refs.lineChart); myChart = this.$echarts.init(this.$refs.lineChart);
} }
// myChart.showLoading()　　//开启loading
let option = { let option = {
// title: { // title: {
// show: true, // show: true,
@ -136,24 +138,27 @@ export default {
], ],
series: this.series series: this.series
}; };
myChart.setOption(option)　　//再设置配置
myChart.setOption(option); // myChart.hideLoading()
// myChart.setOption(option);
// window.onresize = () => { // 根据窗口大小变化图表自适应 // window.onresize = () => { // 根据窗口大小变化图表自适应
// myChart.resize(); // myChart.resize();
// }; // };
window.addEventListener('resize', function() { window.addEventListener('resize', function () {
myChart.resize(); myChart.resize();
}); });
} }
}, },
mounted() { mounted() {
this.drawLine(); this.drawLine();
console.log(this.title);
}, },
watch: { watch: {
list: { list: {
handler(newVal) { handler(newVal) {
if (newVal ) { if (newVal) {
console.log(this.title);
console.log(newVal, this.title + '折现图的数据');
// x轴的数据 // x轴的数据
this.xData = newVal.map(val => { this.xData = newVal.map(val => {
return val.time; return val.time;
@ -184,7 +189,7 @@ export default {
this.series[0].name = '总量'; this.series[0].name = '总量';
// 映射出类型数组 // 映射出类型数组
let arr = newVal.map(function(ele) { let arr = newVal.map(function (ele) {
if (ele.type_data != null) { if (ele.type_data != null) {
return ele.type_data; return ele.type_data;
} }
@ -195,23 +200,32 @@ export default {
mapN.push(arr[t][i]); mapN.push(arr[t][i]);
} }
} }
var lineArr = []; var lineArr = [{
// 遍历需要多少条类型折线 name: '机动车',
if (this.typeValue) { type: 'line',
console.log("this.typeValue.type_data",this.typeValue.type_data) data: [],
if (this.typeValue.type_data!=undefined) { smooth: true
this.typeValue.type_data.forEach(ele => { }, {
lineArr.push({ name: '非机动车',
name: ele.name, type: 'line',
type: 'line', data: [],
data: [], smooth: true
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 => { mapN.forEach(ele => {
if (ele.name == '机动车') { if (ele.name == '机动车') {
lineArr[0].data.push(ele.quantity); lineArr[0].data.push(ele.quantity);
@ -226,9 +240,9 @@ export default {
} }
// 总和数量 // 总和数量
let mapNR1 = []; let mapNR1 = [];
newVal.map(function(ele) { newVal.map(function (ele) {
if (ele.type_data != null) { 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; return cur.quantity + prev;
}, 0); }, 0);
mapNR1.push(sum); mapNR1.push(sum);
@ -256,7 +270,7 @@ export default {
return ele.in_flow + ele.out_flow; return ele.in_flow + ele.out_flow;
}); });
} else if (this.title == '车头时距') { } else if (this.title == '车头时距') {
console.log("车头时距",newVal) console.log("车头时距", newVal)
this.tooltip = { this.tooltip = {
formatter: '{a} {b}:{c}/s', formatter: '{a} {b}:{c}/s',
show: true, show: true,
@ -265,32 +279,31 @@ export default {
this.series[0].data = newVal.map(val => { this.series[0].data = newVal.map(val => {
return val.headway; return val.headway;
}); });
} else if (this.title == '排队数') { } else if (this.title == '排队数' && this.status == '触发') {
this.series[0].data = newVal.map(val => { this.series[0].data = newVal.map(val => {
return val.n_queue; 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 == '检测数') { } else if (this.title == '检测数') {
this.series[0].data = newVal.map(val => { this.series[0].data = newVal.map(val => {
return val.n_stay; return val.n_stay;
}); });
} else if (this.title == '延误') { } else if (this.title == '延误') {
this.series[0].data = newVal.map(val => { this.series[0].data = newVal.map(val => {
return val.ave_delay; return val.ave_delay;
}); });
} else if (this.title == '拥堵') { } else if (this.title == '拥堵') {
this.series[0].data = newVal.map(val => {}); this.series[0].data = newVal.map(val => { });
}
if (this.$refs.lineChart) {
this.$nextTick(() => {
this.drawLine();
});
} }
this.drawLine()
} }
}, },
immediate: true deep: true
},
typeValue(newVal){
} }
} }
}; };

16
src/components/target/typeChart.vue
View File

@ -1,6 +1,5 @@
<template> <template><!-- 触发类型 -->
<!-- 触发类型 --> <div class="setion">
<div class="setion" >
<p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p> <p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p>
<!-- 触发数据数值渲染 --> <!-- 触发数据数值渲染 -->
<div class="typeContent"> <div class="typeContent">
@ -21,7 +20,7 @@
</div> </div>
</div> </div>
<el-card v-show="echartArr.includes('数值')" style="width: 150px; margin-bottom: 20px; text-align: center"> <el-card v-show="echartArr.includes('数值')" style="width: 150px; margin-bottom: 20px; text-align: center">
<div v-if="dataArr"> <div v-if="dataArr && dataArr.length != 0">
<div v-if="title == '类型'"> <div v-if="title == '类型'">
<span style="font-size: 15px;">类型数量总和</span><br /> <span style="font-size: 15px;">类型数量总和</span><br />
<span style="font-size: 30px; font-weight: bold"> <span style="font-size: 30px; font-weight: bold">
@ -69,7 +68,8 @@
<div> <div>
<span <span
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"></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.chartName + '-' + this.componentName + '-' + '表格' + '-' + triggerType <span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' +
triggerType
}}</span> }}</span>
</div> </div>
<div class="tableTime"> <div class="tableTime">
@ -139,7 +139,9 @@ export default {
valueShow: {} valueShow: {}
}; };
}, },
created() { }, created() {
},
methods: { methods: {
// 计算类型的数值 // 计算类型的数值
}, },
@ -150,7 +152,7 @@ export default {
// 监听触发数据 // 监听触发数据
dataArr: { dataArr: {
handler(newVal) { handler(newVal) {
console.log("dataArr",newVal) console.log("dataArr", newVal)
}, },
immediate: true immediate: true

8
src/views/bounced/analysisConfiguration.vue
View File

@ -737,9 +737,9 @@ export default {
OnSceneload(newV) { OnSceneload(newV) {
var ip = window.location.host; var ip = window.location.host;
this.ipData = 'http://' + ip.split(':')[0] + ':5000'; this.ipData = 'http://' + ip.split(':')[0] + ':5000';
// document.getElementById('mapModule').contentWindow.getIpData(this.ipData); document.getElementById('mapModule').contentWindow.getIpData(this.ipData);
this.$refs.analysisWeb.contentWindow.getIpData('http://172.16.1.168:5000'); this.$refs.analysisWeb.contentWindow.getIpData('http://172.16.1.168:5000');
this.$refs.analysisWeb.contentWindow.getDianwei(this.$route.query.id); // this.$refs.analysisWeb.contentWindow.getDianwei(this.$route.query.id);
this.unityDone = true; this.unityDone = true;
}, },
handleDeleteDian(row, idx) { handleDeleteDian(row, idx) {
@ -1046,8 +1046,8 @@ export default {
// const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt // const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
var ip = window.location.host.split(":")[0]; var ip = window.location.host.split(":")[0];
console.log("ip",ip) console.log("ip",ip)
// const host = `ws://${ip}:10087`; const host = `ws://${ip}:10087`;
const host = 'ws://172.16.1.168:10087/'; // const host = 'ws://172.16.1.168:10087/';
const options = { const options = {
// 配置 // 配置
// 测试：订阅本机IP // 测试：订阅本机IP

166
src/views/bounced/dataBoard.vue
View File

@ -16,27 +16,29 @@
</p> </p>
<span class="downPull1" data-num="1" @click="sectionHandle(i)"></span> <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span>
</div> </div>
<div v-for="o in s.children" :key="o.analogAreaComponentId"> <div v-if="s.children">
<OD v-if="o.componentName.includes('OD')" :pageType="o.graphicType" triggerType="触发" <div v-for="o in s.children" :key="o.analogAreaComponentId">
:componentName="o.componentName" :echartArr="o.presentationForm" <OD v-if="o.componentName.includes('OD')" :pageType="o.graphicType" triggerType="触发"
:dataArr="o.trigger" :title="o.componentName.split('_')[0]" :componentName="o.componentName" :echartArr="o.presentationForm"
:chartName="o.combinationName" /> :dataArr="o.trigger" :title="o.componentName.split('_')[0]"
<!--触发的组件 --> :chartName="o.combinationName" />
<typeChart v-if="o.timeMode === '触发'" :pageType="o.graphicType" <!--触发的组件 -->
:triggerType="o.timeMode" :componentName="o.componentName" :dataArr="o.trigger" <typeChart v-if="o.timeMode === '触发'" :pageType="o.graphicType"
:echartArr="o.presentationForm" :title="o.componentName.split('_')[0]" :triggerType="o.timeMode" :componentName="o.componentName" :dataArr="o.trigger"
:chartName="o.combinationName" :typeValue="typeValue" /> :echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
<typeChart v-if="o.timeMode === '周期时刻'" :pageType="o.graphicType" :chartName="o.combinationName" :typeValue="typeValue" />
:triggerType="o.timeMode" :componentName="o.componentName" <typeChart v-if="o.timeMode === '周期时刻'" :pageType="o.graphicType"
:dataArr="o.cycleTimeData" :echartArr="o.presentationForm" :triggerType="o.timeMode" :componentName="o.componentName"
:title="o.componentName.split('_')[0]" :chartName="o.combinationName" :dataArr="o.cycleTimeData" :echartArr="o.presentationForm"
:typeValue="typeCycleTimeData" /> :title="o.componentName.split('_')[0]" :chartName="o.combinationName"
<!-- 周期统计的组件 --> :typeValue="typeCycleTimeData" />
<typeChart v-if="o.timeMode === '周期统计'" :pageType="o.graphicType" <!-- 周期统计的组件 -->
:triggerType="o.timeMode" :componentName="o.componentName" <typeChart v-if="o.timeMode === '周期统计'" :pageType="o.graphicType"
:dataArr="o.cycleStatistics" :echartArr="o.presentationForm" :triggerType="o.timeMode" :componentName="o.componentName"
:title="o.componentName.split('_')[0]" :chartName="o.combinationName" :dataArr="o.cycleStatistics" :echartArr="o.presentationForm"
:typeValue="typeCycleStatistics" /> :title="o.componentName.split('_')[0]" :chartName="o.combinationName"
:typeValue="typeCycleStatistics" />
</div>
</div> </div>
<!-- :data="triggerList.length != 0 ? triggerList : tableData" --> <!-- :data="triggerList.length != 0 ? triggerList : tableData" -->
</div> </div>
@ -90,6 +92,12 @@ export default {
return []; return [];
} }
}, },
componentList:{
type:Array,
default(){
return []
}
}
}, },
data() { data() {
return { return {
@ -339,43 +347,37 @@ export default {
typeValue: {}, typeValue: {},
// 周期时刻的数值看板展示 // 周期时刻的数值看板展示
typeCycleTimeData: {}, typeCycleTimeData: {},
typeCycleStatistics: {} typeCycleStatistics: {},
nw: '1'
}; };
}, },
// beforeCeated(){
// },
created() { created() {
// this.idVal = this.$route.query.id; this.idVal = this.$route.query.id;
// getComponentSection({ VideoId: this.idVal }).then((res) => { this.sectionData = []
// if (res.data.code == 200) { this.sectionArr = []
// this.componentList = res.data.data // if(this.nw=='second'){
// console.log(res.data.data);
// this.siftData()
// // 处理获取过来的数据
// // this.componentList.forEach((val) => {
// // this.sectionArr.push(val.combinationName);
// // this.sectionArr = Array.from(new Set(this.sectionArr));
// // });
// // this.sectionData = this.sectionArr.map((item) => {
// // item = { title: item, children: [] };
// // this.componentList.forEach((val) => {
// // if (item.title == val.combinationName) {
// // item.children.push(val);
// // }
// // });
// // return item;
// // });
// console.log(this.sectionData, '455');
// } else if (res.data.code == 404) {
// }
// });
// }
this.getNEW()
}, },
methods: { methods: {
getNEW() {
getComponentSection({ VideoId: this.$route.query.id }).then((res) => {
if (res.data.code == 200) {
this.componentList = res.data.data
this.siftData(this.componentList)
} else if (res.data.code == 404) {
}
});
},
siftData(list) { siftData(list) {
// this.sectionArr = []
this.sectionData = [] // this.sectionData = []
this.sectionArr = []
list.forEach((val) => { list.forEach((val) => {
this.sectionArr.push(val.combinationName); this.sectionArr.push(val.combinationName);
this.sectionArr = Array.from(new Set(this.sectionArr)); this.sectionArr = Array.from(new Set(this.sectionArr));
@ -393,7 +395,7 @@ export default {
}); });
return item; return item;
}); });
console.log(this.sectionData, '筛选数据');
}, },
// 组件图标点击下拉事件 // 组件图标点击下拉事件
sectionHandle(i) { sectionHandle(i) {
@ -420,41 +422,36 @@ export default {
} }
}, },
// channge(oldVal, newVal) {
// if (newVal == "second") {
// this.getNEW()
// } else if (oldVal == "second") {
// this.getNEW()
// }
// }
// 触发数据的类型数值 // 触发数据的类型数值
}, },
mounted() { mounted() {
getComponentSection({ VideoId: this.$route.query.id }).then(res => { // getComponentSection({ VideoId: this.$route.query.id }).then(res => {
if (res.data.code == 200) { // if (res.data.code == 200) {
console.log(res.data.data, '请求数据'); // console.log(res.data.data, '请求数据');
this.componentList = res.data.data; // this.componentList = res.data.data;
this.siftData(this.componentList); // this.siftData(this.componentList);
} else if (res.data.code == 404) { // } else if (res.data.code == 404) {
} // }
}); // });
}, },
watch: { watch: {
activeName: {
handler(newVal) {
console.log("newVal", newVal)
if (newVal == "second") {
getComponentSection({ VideoId: this.$route.query.id }).then(res => {
if (res.data.code == 200) {
console.log(res.data.data, '请求数据');
this.componentList = res.data.data;
this.siftData(this.componentList);
} else if (res.data.code == 404) {
}
});
}
}, // },
immediate: true // immediate: true
}, // },
// activeName: 'channge',
// 触发的原始数据 // 触发的原始数据
triggerData: { triggerData: {
handler(newVal, oldVal) { handler(newVal, oldVal) {
@ -467,9 +464,8 @@ export default {
handler(newVal) { handler(newVal) {
this.triggerList = newVal this.triggerList = newVal
// 触发数据 // 触发数据
console.log(newVal, 'triggerlistData');
if (newVal && this.sectionData.length!=0) { if (newVal && this.sectionData.length != 0) {
this.componentList.forEach(ele => { this.componentList.forEach(ele => {
if (ele.trigger == undefined && ele.timeMode == '触发') { if (ele.trigger == undefined && ele.timeMode == '触发') {
ele.trigger = [] ele.trigger = []
@ -501,14 +497,13 @@ export default {
cycleTimeData: { cycleTimeData: {
handler(newVal) { handler(newVal) {
// 监听到打印周期时刻数据 // 监听到打印周期时刻数据
console.log(newVal, '440'); if (newVal.length != 0 && this.sectionData) {
if (newVal.length != 0 && this.sectionData) {
this.componentList.forEach(ele => { this.componentList.forEach(ele => {
if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') { if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
ele.cycleTimeData = [] ele.cycleTimeData = []
} }
newVal.forEach(item => { newVal.forEach(item => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻' && ele.analogAreaGraphId == item.graphical_id) { if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻' ) {
if (ele.cycleTimeData.length == 10) { if (ele.cycleTimeData.length == 10) {
ele.cycleTimeData.slice(ele.cycleTimeData.length - 1, 0) ele.cycleTimeData.slice(ele.cycleTimeData.length - 1, 0)
} else { } else {
@ -522,7 +517,6 @@ export default {
} }
}) })
}) })
console.log(this.sectionData, '455');
} }
}, },
immediate: true immediate: true
@ -535,9 +529,8 @@ export default {
// } // }
cycleStatistics: { cycleStatistics: {
handler(newVal) { handler(newVal) {
console.log(newVal, '周期统计');
if (newVal.length != 0&& this.sectionData) { if (newVal.length != 0 && this.sectionData) {
this.componentList.forEach(ele => { this.componentList.forEach(ele => {
if (ele.cycleStatistics == undefined && ele.timeMode == '周期统计') { if (ele.cycleStatistics == undefined && ele.timeMode == '周期统计') {
ele.cycleStatistics = []; ele.cycleStatistics = [];
@ -563,7 +556,6 @@ export default {
}); });
}); });
} }
console.log(this.sectionData, '周期统计筛选数据');
} }
}, },

5
src/views/bounced/form.vue
View File

@ -409,7 +409,10 @@ export default {
getDataByMqtt(url, topic, cIdNum) { getDataByMqtt(url, topic, cIdNum) {
const clientId = "test_id_" + String(new Date().getTime()); // 用户名 const clientId = "test_id_" + String(new Date().getTime()); // 用户名
// const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt // const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
const host = 'ws://172.16.1.168:10087/'; var ip = window.location.host.split(":")[0];
console.log("ip",ip)
const host = `ws://${ip}:10087`;
// const host = 'ws://172.16.1.168:10087/';
const options = { const options = {
// 配置 // 配置

158
src/views/index.vue
View File

@ -3,29 +3,18 @@
<!-- <div class="container"> --> <!-- <div class="container"> -->
<div> <div>
<!-- <el-tabs type="border-card" v-model="activeName" tab-position="left"> --> <!-- <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" >
<el-tab-pane :label="titName" name="first"> <el-tab-pane :label="titName" name="first">
<div class="mapModuleApp"> <div class="mapModuleApp">
<iframe <iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height:100%;"
id="mapModule" scrolling="no" v-if="videoUnityShow"></iframe>
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> --> <!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none" ref="iframe"></iframe> -->
<el-empty :description="description" v-if="videoAnalysisShow"> </el-empty> <el-empty :description="description" v-if="videoAnalysisShow"> </el-empty>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="数据看板" name="second"> <el-tab-pane label="数据看板" name="second">
<dataBoard <dataBoard ref="dataBoardRef" :activeName="activeName" :triggerData="triggerData" :triggerListData="triggerListData"
:activeName="activeName" :cycleTimeData="cycleTimeData" :cycleStatistics="cycleStatistics" v-if="activeName='second'"></dataBoard>
:triggerData="triggerData"
:triggerListData="triggerListData"
:cycleTimeData="cycleTimeData"
:cycleStatistics="cycleStatistics"
></dataBoard>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="分析配置" name="third"> <el-tab-pane label="分析配置" name="third">
<analysisConfiguration :analysisConfigurationdata="analysisConfigurationdata"></analysisConfiguration> <analysisConfiguration :analysisConfigurationdata="analysisConfigurationdata"></analysisConfiguration>
@ -37,31 +26,12 @@
</el-tabs> </el-tabs>
<!-- <el-button class="videoAnalysis" type="primary" size="mini" @click="videoAnalysisBtn" v-if="videoAnalysisShow" :disabled='disabledVideoAnalysis' <!-- <el-button class="videoAnalysis" type="primary" size="mini" @click="videoAnalysisBtn" v-if="videoAnalysisShow" :disabled='disabledVideoAnalysis'
>视频分析</el-button> --> >视频分析</el-button> -->
<el-button <el-button class="trafficAnalysis" type="primary" plain size="mini" @click="trafficAnalysisBtn"
class="trafficAnalysis" v-if="trafficAnalysisShow" :disabled="disabledTrafficAnalysis">交通分析</el-button>
type="primary"
plain
size="mini"
@click="trafficAnalysisBtn"
v-if="trafficAnalysisShow"
:disabled="disabledTrafficAnalysis"
>交通分析</el-button
>
</div> </div>
<el-drawer <el-drawer class="new-dialog" :visible.sync="dialogFormVisible" direction="btt" custom-class="demo-drawer"
class="new-dialog" ref="drawer" :modal="false" :close-on-click-modal="false" v-alterELDialogMarginTop="{ marginTop: '0vh' }"
:visible.sync="dialogFormVisible" width="100%" :wrapperClosable="false" :with-header="false" size="100%">
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"> <div class="formBox">
<el-form ref="form" :model="form" label-width="80px" :inline="true"> <el-form ref="form" :model="form" label-width="80px" :inline="true">
<el-form-item label="组件名称"> <el-form-item label="组件名称">
@ -82,8 +52,9 @@
</div> </div>
</el-drawer> </el-drawer>
<!-- 组件弹框 --> <!-- 组件弹框 -->
<el-dialog :title="componentTitle + '指标组件'" width="40%" :visible.sync="component" :close-on-click-modal ="false" @close="closeComponentForm()"> <el-dialog :title="componentTitle + '指标组件'" width="40%" :visible.sync="component" :close-on-click-modal="false"
<el-form ref="form" :model="componentForm" label-width="150px" > @close="closeComponentForm()">
<el-form ref="form" :model="componentForm" label-width="150px">
<el-form-item label="名称："> <el-form-item label="名称：">
<el-input v-model="componentForm.componentName"></el-input> <el-input v-model="componentForm.componentName"></el-input>
</el-form-item> </el-form-item>
@ -93,14 +64,11 @@
<el-checkbox v-for="item in typeData" :label="item" :key="item">{{ item }}</el-checkbox> <el-checkbox v-for="item in typeData" :label="item" :key="item">{{ item }}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="数值筛选：" v-if="
label="数值筛选：" componentForm.componentType != 'OD' &&
v-if=" componentForm.componentType != '类型' &&
componentForm.componentType != 'OD' && componentForm.componentType != '流量'
componentForm.componentType != '类型' && ">
componentForm.componentType != '流量'
"
>
<el-input-number v-model="componentForm.startValue"></el-input-number> <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-input-number v-model="componentForm.endValue" style="margin-left:5%"></el-input-number>
</el-form-item> </el-form-item>
@ -112,22 +80,15 @@
</el-form-item> </el-form-item>
<el-form-item label="时间模式："> <el-form-item label="时间模式：">
<el-select v-model="componentForm.timeMode" placeholder="请选择时间模式"> <el-select v-model="componentForm.timeMode" placeholder="请选择时间模式">
<el-option <el-option label="触发" value="触发"
label="触发" v-if="componentForm.componentType != '延误' && componentForm.componentType != '拥堵'"></el-option>
value="触发" <el-option label="周期时刻" value="周期时刻" v-if="
v-if="componentForm.componentType != '延误' && componentForm.componentType != '拥堵'" componentForm.componentType != '排队数' &&
></el-option> componentForm.componentType != '检测数' &&
<el-option componentForm.componentType != '延误' &&
label="周期时刻" componentForm.componentType != '拥堵' &&
value="周期时刻" componentForm.componentType != '流量'
v-if=" "></el-option>
componentForm.componentType != '排队数' &&
componentForm.componentType != '检测数' &&
componentForm.componentType != '延误' &&
componentForm.componentType != '拥堵' &&
componentForm.componentType != '流量'
"
></el-option>
<el-option label="周期统计" value="周期统计" v-if="componentForm.componentType != 'OD'"> </el-option> <el-option label="周期统计" value="周期统计" v-if="componentForm.componentType != 'OD'"> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -168,11 +129,15 @@
<el-form-item label="展现形式：" v-if="componentForm.componentType != 'OD'"> <el-form-item label="展现形式：" v-if="componentForm.componentType != 'OD'">
<el-checkbox-group v-model="componentForm.presentation" @change="handlePresentation"> <el-checkbox-group v-model="componentForm.presentation" @change="handlePresentation">
<el-checkbox label="数值" name="presentation"></el-checkbox> <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="type"></el-checkbox>
<el-checkbox label="直方图" name="presentation" v-if="componentForm.componentType == '类型'"></el-checkbox> <el-checkbox label="直方图" name="presentation"
<el-checkbox label="饼状图" name="presentation" v-if="componentForm.componentType == '类型'"></el-checkbox> 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 label="均值图" name="presentation"
v-if="componentForm.componentType != '拥堵' || componentForm.componentType != '流量' || componentForm.componentType != '类型' || componentForm.componentType != '延误'"></el-checkbox>
</el-checkbox-group> </el-checkbox-group>
<!-- <el-checkbox-group v-model="componentForm.presentation" @change="handlePresentation"> <!-- <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 v-for="item in sectionals" :label="item.graphicName" :key="item.graphicId" >{{item.graphicName}}</el-checkbox>
@ -370,12 +335,15 @@ export default {
videoType: '实时视频' videoType: '实时视频'
}, },
description: '请等待排队', description: '请等待排队',
ipData: '' ipData: '',
componentList:[]
}; };
}, },
//离开当前页面后执行 //离开当前页面后执行
destroyed: function() { destroyed: function () {
//console.log("离开当前页") //console.log("离开当前页")
// client.publish('msg_stream',JSON.stringify({"msg_flag":-1})) // client.publish('msg_stream',JSON.stringify({"msg_flag":-1}))
//client.end(); //client.end();
@ -420,8 +388,16 @@ export default {
// } // }
} }
}, },
mounted() {}, mounted() { },
methods: { methods: {
// 数据看板的标签点击
// handleClick(tab, event) {
// if(tab._props.name=='second'){
// this.$refs.dataBoardRef.getNEW()
// }
// },
/** 创建mqtt */ /** 创建mqtt */
createMqtt() { createMqtt() {
//创建链接，接收数据 //创建链接，接收数据
@ -573,7 +549,7 @@ export default {
} else { } else {
this.analysisConfigurationdata = msg; this.analysisConfigurationdata = msg;
} }
} catch (error) {} } catch (error) { }
break; break;
// 树结构 // 树结构
case 'stream' + this.number: case 'stream' + this.number:
@ -584,7 +560,7 @@ export default {
const msg = JSON.parse(temp); const msg = JSON.parse(temp);
// console.log("msg",msg) // console.log("msg",msg)
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg)); document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
} catch (error) {} } catch (error) { }
break; break;
// 控制台输出 // 控制台输出
case 'trajectory' + this.number: case 'trajectory' + this.number:
@ -595,7 +571,7 @@ export default {
const msg = JSON.parse(temp); const msg = JSON.parse(temp);
// console.log("msg",msg) // console.log("msg",msg)
document.getElementById('mapModule').contentWindow.getGuiJi(JSON.stringify(msg)); document.getElementById('mapModule').contentWindow.getGuiJi(JSON.stringify(msg));
} catch (error) {} } catch (error) { }
break; break;
// 触发 // 触发
case 'detection' + this.number: case 'detection' + this.number:
@ -613,7 +589,7 @@ export default {
} }
document.getElementById('mapModule').contentWindow.getChuFa(JSON.stringify(detId)); document.getElementById('mapModule').contentWindow.getChuFa(JSON.stringify(detId));
} }
} catch (error) {} } catch (error) { }
break; break;
case 'trigger-' + this.$route.query.id: case 'trigger-' + this.$route.query.id:
try { try {
@ -623,8 +599,9 @@ export default {
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = []; var detId = [];
const msgN = JSON.parse(temp); const msgN = JSON.parse(temp);
// console.log("trigger_msgN",msgN)
this.triggerListData = msgN; this.triggerListData = msgN;
} catch (error) {} } catch (error) { }
break; break;
case 'cycle_time-' + this.$route.query.id: case 'cycle_time-' + this.$route.query.id:
try { try {
@ -635,7 +612,7 @@ export default {
var detId = []; var detId = [];
const msgN = JSON.parse(temp); const msgN = JSON.parse(temp);
this.cycleTimeData = msgN; this.cycleTimeData = msgN;
} catch (error) {} } catch (error) { }
break; break;
case 'cycle_statistics-' + this.$route.query.id: case 'cycle_statistics-' + this.$route.query.id:
try { try {
@ -646,7 +623,7 @@ export default {
var detId = []; var detId = [];
const msgN = JSON.parse(temp); const msgN = JSON.parse(temp);
this.cycleStatistics = msgN; this.cycleStatistics = msgN;
} catch (error) {} } catch (error) { }
break; break;
} }
this.receiveNews = ''; this.receiveNews = '';
@ -1168,7 +1145,7 @@ export default {
closeComponentForm() { closeComponentForm() {
console.log("111") console.log("111")
this.component = false; this.component = false;
document.getElementById('mapModule').contentWindow.editComponent(''); document.getElementById('mapModule').contentWindow.editComponent('');
}, },
closeForm(form) { closeForm(form) {
@ -1270,19 +1247,25 @@ export default {
} }
.content-box::-webkit-scrollbar { .content-box::-webkit-scrollbar {
display: none; /* Chrome Safari */ display: none;
/* Chrome Safari */
} }
.new-dialog { .new-dialog {
width: 49%; width: 49%;
height: 11%; height: 11%;
left: calc(24vw); left: calc(24vw);
top: 90vh; top: 90vh;
bottom: 0 /* right:auto;; */; bottom: 0
/* right:auto;; */
;
} }
.formBox { .formBox {
margin-top: 20px; margin-top: 20px;
margin-left: 20px; margin-left: 20px;
} }
/* .new-dialog .el-dialog { /* .new-dialog .el-dialog {
width:100%!important; width:100%!important;
margin: 0vh auto !important; margin: 0vh auto !important;
@ -1293,13 +1276,17 @@ export default {
margin: 0 auto 0px !important; margin: 0 auto 0px !important;
/* margin-top: 0vh!important; */ /* margin-top: 0vh!important; */
} }
.new-dialog .el-dialog__wrapper::-webkit-scrollbar { .new-dialog .el-dialog__wrapper::-webkit-scrollbar {
display: none; /* Chrome Safari */ display: none;
/* Chrome Safari */
} }
.new-dialog .customWidth { .new-dialog .customWidth {
width: 100%; width: 100%;
min-width: 150px; min-width: 150px;
} }
.mapModuleApp { .mapModuleApp {
/* width:100%; */ /* width:100%; */
width: 1600px; width: 1600px;
@ -1307,6 +1294,7 @@ export default {
display: inline-block; display: inline-block;
border: 1px soild #eee; border: 1px soild #eee;
} }
.el-drawer.btt, .el-drawer.btt,
.el-drawer.ttb { .el-drawer.ttb {
width: 100%; width: 100%;
@ -1324,11 +1312,13 @@ export default {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.videoAnalysis { .videoAnalysis {
position: absolute; position: absolute;
right: 200px; right: 200px;
top: 17px; top: 17px;
} }
.trafficAnalysis { .trafficAnalysis {
position: absolute; position: absolute;
right: 100px; right: 100px;