From 8b96a47daaedd4aaeca4fb8b4ae0a27aa65f0e60 Mon Sep 17 00:00:00 2001
From: Hobart <kolusai@hotmail.com>
Date: Wed, 22 Feb 2023 11:23:30 +0800
Subject: [PATCH 1/2] =?UTF-8?q?bug=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/target/typeChart.vue |   5 +-
 src/views/bounced/dataBoard.vue     | 240 +++++++++++++---------------
 2 files changed, 115 insertions(+), 130 deletions(-)

diff --git a/src/components/target/typeChart.vue b/src/components/target/typeChart.vue
index 6db72da7..7f3c4161 100644
--- a/src/components/target/typeChart.vue
+++ b/src/components/target/typeChart.vue
@@ -31,7 +31,7 @@
                     <div style="font-size: 30px; font-weight: bold" v-if="title == '速度'">
                         <span style="font-size: 15px;">速度</span><br />
                         <!-- <span style="font-size: 30px; font-weight: bold">{{ typeValue.speed }}</span> -->
-                          <span style="font-size: 30px; font-weight: bold">{{ dataArr[0].speed }}</span>
+                        <span style="font-size: 30px; font-weight: bold">{{ dataArr[0].speed }}</span>
                     </div>
                     <div style="font-size: 30px; font-weight: bold" v-if="title == '流量'">
                         <span style="font-size: 15px;">流量</span><br />
@@ -39,7 +39,7 @@
                     </div>
                     <div style="font-size: 30px; font-weight: bold" v-if="title == '车头时距'">
                         <span style="font-size: 15px;">车头时距</span><br />
-                        <span style="font-size: 30px; font-weight: bold">{{ dataArr[0].headway}}</span>
+                        <span style="font-size: 30px; font-weight: bold">{{ dataArr[0].headway }}</span>
                     </div>
                     <div style="font-size: 30px; font-weight: bold" v-if="title == '排队数'">
                         <span style="font-size: 15px;">排队数</span><br />
@@ -86,6 +86,7 @@
         <div class="border" v-if="echartArr.includes('曲线图')">
             <detailDialog />
             <lineChart
+                style="width:100%;"
                 :componentName="componentName"
                 :chartName="chartName"
                 :pageType="pageType"
diff --git a/src/views/bounced/dataBoard.vue b/src/views/bounced/dataBoard.vue
index da3d8940..d825992f 100644
--- a/src/views/bounced/dataBoard.vue
+++ b/src/views/bounced/dataBoard.vue
@@ -3,53 +3,79 @@
         <el-empty v-show="componentList.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'">
+            <div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'">
                 <!-- 断面 -->
                 <div class="plate1" ref="plate1">
-                    <div :class="sectionData.length <= 2 ? 'sectionBox' : 'section'" ref="section"
-                        v-for="(s, i) in sectionData" :key="s.analogAreaComponentId">
+                    <div
+                        :class="sectionData.length <= 2 ? 'sectionBox' : 'section'"
+                        ref="section"
+                        v-for="(s, i) in sectionData"
+                        :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">
+                                    <el-collapse v-model="s.children[0].analogAreaComponentId">
+                                            <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="typeValue"
+                                            />
+                                            <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>
 
-                                    <!-- <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="typeValue" />
-                                        <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" -->
+                                        </div>
+
+                                    </el-collapse>
+
+                                </el-tabs>
                             </div>
                         </template>
                     </div>
@@ -57,9 +83,9 @@
             </div>
         </el-scrollbar>
         <!-- 详情框 -->
-</div>
+    </div>
 </template>
- <!-- :data="triggerList.length != 0 ? tripHandle(o) : tableData" -->
+<!-- :data="triggerList.length != 0 ? tripHandle(o) : tableData" -->
 <script>
 import typeChart from '../../components/target/typeChart.vue';
 import OD from '../../components/target/OD.vue';
@@ -100,10 +126,11 @@ export default {
             default() {
                 return [];
             }
-        },
+        }
     },
     data() {
         return {
+            acticveName: '1',
             title1: '01断面',
             title2: '01区域',
             dialogVisible: false,
@@ -322,8 +349,6 @@ export default {
                 }
             ],
 
-
-
             idVal: '',
             //组件数组
             componentList: [],
@@ -332,16 +357,12 @@ export default {
 
             sectionData: [],
 
-
-
             // 单个区域或者断面的表格触发数据
             tableList: [],
 
-
             // 路线数据
             headWay: [],
 
-
             tripData: [],
 
             sectionArr: [],
@@ -350,46 +371,27 @@ export default {
             typeValue: {},
             // 周期时刻的数值看板展示
             typeCycleTimeData: {},
-            typeCycleStatistics:{}
+            typeCycleStatistics: {}
         };
     },
     created() {
         this.idVal = this.$route.query.id;
-        getComponentSection({ VideoId: this.idVal }).then((res) => {
+        getComponentSection({ VideoId: this.idVal }).then(res => {
             if (res.data.code == 200) {
-                console.log(res.data.data, '11111111111111111');
-                this.componentList = 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.componentList = res.data.data;
+                this.siftData();
             }
         });
-
     },
     methods: {
-
         siftData() {
-            this.componentList.forEach((val) => {
+            this.componentList.forEach(val => {
                 this.sectionArr.push(val.combinationName);
                 this.sectionArr = Array.from(new Set(this.sectionArr));
             });
-            this.sectionData = this.sectionArr.map((item) => {
+            this.sectionData = this.sectionArr.map(item => {
                 item = { title: item, children: [] };
-                this.componentList.forEach((val) => {
+                this.componentList.forEach(val => {
                     if (item.title == val.combinationName) {
                         item.children.push(val);
                     }
@@ -404,69 +406,58 @@ export default {
             let downPulls1 = document.querySelectorAll('.downPull1');
             // 断面的小图标
             downPulls1[i].dataset.num++;
-
             if (downPulls1[i].dataset.num % 2 == 0) {
                 downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';
-                sections[i].style.height = 'auto';
+                // sections[i].style.height = 'auto';
                 if (sectionBox[i] != undefined) {
-                    sectionBox[i].style.height = 'auto';
+                    // sectionBox[i].style.height = 'auto';
                 }
-
             } else {
                 downPulls1[i].style.cssText = 'transition: all 0.5s linear;';
-                sections[i].style.height = '500px';
+                // sections[i].style.height = '500px';
                 if (sectionBox[i] != undefined) {
-                    sectionBox[i].style.height = '48vh'
+                    // sectionBox[i].style.height = '48vh';
                 }
-
-
             }
-        },
-
+        }
 
         // 触发数据的类型数值
-
-    },
-    mounted() {
     },
+    mounted() {},
     watch: {
-
         // 触发的原始数据
         triggerData: {
-            handler(newVal, oldVal) {
-            },
+            handler(newVal, oldVal) {},
             immediate: true
         },
 
         // 处理过的触发数据
         triggerListData: {
             handler(newVal) {
-                this.triggerList = newVal
+                this.triggerList = newVal;
                 // 触发数据
                 // console.log(newVal, 'triggerlistData');
 
                 this.componentList.forEach(ele => {
                     if (ele.trigger == undefined && ele.timeMode == '触发') {
-                        ele.trigger = []
+                        ele.trigger = [];
                     }
                     newVal.forEach(item => {
                         if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {
                             if (ele.trigger.length == 10) {
-                                ele.trigger.pop()
-
+                                ele.trigger.pop();
                             } else {
-                                item.time = item.time.split('.')[0]
+                                item.time = item.time.split('.')[0];
                                 // 该时间的触发数据
                                 if (item.type_data != null) {
                                     // console.log(item,'461461');
-                                    this.typeValue = item
+                                    this.typeValue = item;
                                 }
-                                ele.trigger.unshift(item)
+                                ele.trigger.unshift(item);
                             }
                         }
-                    })
-                })
-                console.log(this.sectionData,'触发的筛选数据');
+                    });
+                });
             },
             immediate: true
         },
@@ -478,24 +469,27 @@ export default {
                 if (newVal.length != 0) {
                     this.componentList.forEach(ele => {
                         if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
-                            ele.cycleTimeData = []
+                            ele.cycleTimeData = [];
                         }
                         newVal.forEach(item => {
-                            if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻' && ele.analogAreaGraphId == item.graphical_id) {
+                            if (
+                                ele.analogAreaComponentId == item.component_id &&
+                                ele.timeMode == '周期时刻' &&
+                                ele.analogAreaGraphId == item.graphical_id
+                            ) {
                                 if (ele.cycleTimeData.length == 10) {
-                                    ele.cycleTimeData.slice(ele.cycleTimeData.length-1,0)
+                                    ele.cycleTimeData.slice(ele.cycleTimeData.length - 1, 0);
                                 } else {
-                                      item.time = item.time.split('.')[0]
-                                    if(item.type_data!=null){
+                                    item.time = item.time.split('.')[0];
+                                    if (item.type_data != null) {
                                         // 周期时刻的类型数据
-                                        this.typeCycleTimeData = item
+                                        this.typeCycleTimeData = item;
                                     }
-                                    ele.cycleTimeData.unshift(item)
+                                    ele.cycleTimeData.unshift(item);
                                 }
                             }
-                        })
-                    })
-                    console.log(this.sectionData, '455');
+                        });
+                    });
                 }
             },
             immediate: true
@@ -516,19 +510,14 @@ export default {
                             ele.cycleStatistics = [];
                         }
                         newVal.forEach(item => {
-                            if (
-                                ele.analogAreaComponentId == item.component_id &&
-                                ele.timeMode == '周期统计'
-                            ) {
+                            if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期统计') {
                                 if (ele.cycleStatistics.length == 10) {
                                     ele.cycleStatistics.pop();
                                 } else {
-                                    item.time = item.time.split('.')[0]
+                                    item.time = item.time.split('.')[0];
                                     if (item.type_data != null) {
-
-                                    //周期时刻的类型数据
-                                    this.typeCycleStatistics = item;
-
+                                        //周期时刻的类型数据
+                                        this.typeCycleStatistics = item;
                                     }
                                     ele.cycleStatistics.unshift(item);
                                 }
@@ -536,9 +525,8 @@ export default {
                         });
                     });
                 }
-                console.log(this.sectionData, '周期统计筛选数据');
             }
-        },
+        }
         // activeName: {
         //     handler(newVal) {
         //         if (newVal == "second") {
@@ -554,10 +542,7 @@ export default {
         //     },
         //     immediate: true
         // }
-    },
-
-
-
+    }
 };
 </script>
 
@@ -577,7 +562,7 @@ export default {
 
 /deep/ .el-scrollbar__view {
     display: inline-block !important;
-    width: 100%
+    width: 100%;
 }
 
 /deep/ .el-scrollbar__wrap {
@@ -591,7 +576,6 @@ export default {
     .dataBoard {
         height: 100%;
     }
-
 }
 
 .dataBoard .region,
@@ -600,7 +584,7 @@ export default {
     border: 1px solid #e4e7ed;
     box-sizing: border-box;
     padding: 15px;
-    height: 500px;
+    height: auto;
     position: relative;
     transition: all 1s;
     overflow: hidden;
@@ -608,7 +592,7 @@ export default {
 
 .dataBoard .sectionBox {
     width: 100%;
-    height: 48vh;
+    height: auto;
     border: 1px solid #e4e7ed;
     box-sizing: border-box;
     padding: 15px;
@@ -681,4 +665,4 @@ export default {
 .active {
     transition: all 0.5s linear;
 }
-</style>
\ No newline at end of file
+</style>

From 81c9816066bfb1dc918795656bf63122fed6d2b6 Mon Sep 17 00:00:00 2001
From: Hobart <kolusai@hotmail.com>
Date: Wed, 22 Feb 2023 15:24:54 +0800
Subject: [PATCH 2/2] =?UTF-8?q?bug=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/target/typeChart.vue | 10 +++++-----
 src/views/bounced/dataBoard.vue     |  6 ++++--
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/target/typeChart.vue b/src/components/target/typeChart.vue
index 06243d0d..3b7090da 100644
--- a/src/components/target/typeChart.vue
+++ b/src/components/target/typeChart.vue
@@ -14,7 +14,7 @@
                         </div>
                         <div>
                             <div>
-                                {{ typeValue.time }}
+                                {{ typeValue.time ? typeValue.time : '' }}
                             </div>
                         </div>
                     </el-card>
@@ -55,7 +55,7 @@
                     </div>
                     <div>
                         <div>
-                            {{ dataArr[0].time }}
+                            {{ dataArr[0].time ? dataArr[0].time : '' }}
                         </div>
                     </div>
                 </div>
@@ -70,10 +70,10 @@
                     <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>
+                    <span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' + triggerType }}</span>
                 </div>
                 <div class="tableTime">
-                    {{ dataArr[0].time }}
+                    {{ dataArr[0].time ? dataArr[0].time : '' }}
                 </div>
             </div>
             <div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
@@ -180,7 +180,7 @@ export default {
         // 监听触发数据
         dataArr: {
             handler(newVal) {
-                console.log("dataArr",newVal)
+                console.log('dataArr', newVal);
             },
 
             immediate: true
diff --git a/src/views/bounced/dataBoard.vue b/src/views/bounced/dataBoard.vue
index d825992f..a7c30a2d 100644
--- a/src/views/bounced/dataBoard.vue
+++ b/src/views/bounced/dataBoard.vue
@@ -20,7 +20,7 @@
                                     </p>
                                     <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span>
                                 </div>
-                                    <el-collapse v-model="s.children[0].analogAreaComponentId">
+                                    <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
@@ -130,7 +130,7 @@ export default {
     },
     data() {
         return {
-            acticveName: '1',
+            acticveName: [],
             title1: '01断面',
             title2: '01区域',
             dialogVisible: false,
@@ -391,10 +391,12 @@ export default {
             });
             this.sectionData = this.sectionArr.map(item => {
                 item = { title: item, children: [] };
+                this.acticveName=[]
                 this.componentList.forEach(val => {
                     if (item.title == val.combinationName) {
                         item.children.push(val);
                     }
+                    this.acticveName.push(val.analogAreaComponentId)
                 });
                 return item;
             });