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 // const host = 'ws://49.234.27.18:10087/'; // urlws://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 = {
// //

View File

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

View File

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