This commit is contained in:
chengdandan 2023-02-22 16:41:08 +08:00
commit a0e97c56ee
3 changed files with 82 additions and 45 deletions

View File

@ -67,8 +67,8 @@ export default {
// const host = 'ws://49.234.27.18:10087/'; // urlws://broker.emqx.io:8083/mqtt
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 host = `ws://${ip}:10087`;
// const host = 'ws://172.16.1.168:10087/';
const options = {
//

View File

@ -13,46 +13,67 @@
:key="s.analogAreaComponentId"
>
<template>
<div ref="sectionContent" >
<div ref="sectionContent">
<div>
<p class="board-title">
<span>{{ s.title }}</span>
</p>
<!-- <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span> -->
</div>
<div v-for="o in s.children" :key="o.analogAreaComponentId">
<!-- <OD v-if="o.componentName.includes('OD')" :pageType="o.graphicType" triggerType="触发"
:componentName="o.componentName" :echartArr="o.presentationForm"
:dataArr="o.trigger" :title="o.componentName.split('_')[0]"
:chartName='o.combinationName' />
<typeChart v-else :pageType="o.graphicType" :triggerType="o.timeMode"
:componentName="o.componentName"
:dataArr="o.timeMode == '触发' ? o.trigger : o.cycleTimeData"
:echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
:chartName='o.combinationName'
:typeValue="o.timeMode == '触发' ? typeValue : typeCycleTimeData" /> -->
<OD v-if="o.componentName.includes('OD')" :pageType="o.graphicType" triggerType="触发"
:componentName="o.componentName" :echartArr="o.presentationForm"
: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"
:echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
:chartName="o.combinationName" :typeValue="typeTimeMode" />
<typeChart v-if="o.timeMode === '周期时刻'" :pageType="o.graphicType"
:triggerType="o.timeMode" :componentName="o.componentName"
:dataArr="o.cycleTimeData" :echartArr="o.presentationForm"
:title="o.componentName.split('_')[0]" :chartName="o.combinationName"
:typeValue="typeCycleTimeData" />
<!-- 周期统计的组件 -->
<typeChart v-if="o.timeMode === '周期统计'" :pageType="o.graphicType"
:triggerType="o.timeMode" :componentName="o.componentName"
:dataArr="o.cycleStatistics" :echartArr="o.presentationForm"
:title="o.componentName.split('_')[0]" :chartName="o.combinationName"
:typeValue="typeCycleStatistics" />
</div>
<!-- :data="triggerList.length != 0 ? triggerList : tableData" -->
<el-tabs>
<el-collapse v-model="acticveName">
<div v-for="o in s.children" :key="o.analogAreaComponentId">
<el-collapse-item :title="o.componentName" :name="o.analogAreaComponentId">
<OD
v-if="o.componentName.includes('OD')"
:pageType="o.graphicType"
triggerType="触发"
:componentName="o.componentName"
:echartArr="o.presentationForm"
: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"
:echartArr="o.presentationForm"
:title="o.componentName.split('_')[0]"
:chartName="o.combinationName"
:typeValue="typeTimeMode"
/>
<typeChart
v-if="o.timeMode === '周期时刻'"
:pageType="o.graphicType"
:triggerType="o.timeMode"
:componentName="o.componentName"
:dataArr="o.cycleTimeData"
:echartArr="o.presentationForm"
:title="o.componentName.split('_')[0]"
:chartName="o.combinationName"
:typeValue="typeCycleTimeData"
/>
<!-- 周期统计的组件 -->
<typeChart
style="width: 100%;"
v-if="o.timeMode === '周期统计'"
:pageType="o.graphicType"
:triggerType="o.timeMode"
:componentName="o.componentName"
:dataArr="o.cycleStatistics"
:echartArr="o.presentationForm"
:title="o.componentName.split('_')[0]"
:chartName="o.combinationName"
:typeValue="typeCycleStatistics"
/>
</el-collapse-item>
</div>
</el-collapse>
</el-tabs>
</div>
</template>
</div>
@ -351,28 +372,33 @@ export default {
};
},
created() {
this.idVal = this.$route.query.id;
getComponentSection({ VideoId: this.idVal }).then(res => {
this.getNew()
},
methods: {
getNew(){
// this.idVal = ;
getComponentSection({ VideoId: this.$route.query.id }).then(res => {
if (res.data.code == 200) {
this.componentList = res.data.data;
this.siftData();
}
});
},
methods: {
},
siftData() {
// this.sectionArr=[]
// this.sectionData=[]
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.acticveName=[]
this.acticveName = [];
this.componentList.forEach(val => {
if (item.title == val.combinationName) {
item.children.push(val);
}
this.acticveName.push(val.analogAreaComponentId)
this.acticveName.push(val.analogAreaComponentId);
});
return item;
});
@ -397,6 +423,19 @@ export default {
// sectionBox[i].style.height = '48vh';
}
}
},
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()
}
}
//
@ -408,7 +447,7 @@ export default {
handler(newVal, oldVal) {},
immediate: true
},
activeName:'channge',
//
triggerListData: {
handler(newVal) {

View File

@ -409,8 +409,6 @@ export default {
getDataByMqtt(url, topic, cIdNum) {
const clientId = "test_id_" + String(new Date().getTime()); //
// const host = 'ws://49.234.27.18:10087/'; // urlws://broker.emqx.io:8083/mqtt
var ip = window.location.host.split(":")[0];
console.log("ip",ip)
const host = `ws://${ip}:10087`;
// const host = 'ws://172.16.1.168:10087/';