src/components/chart/barChart.vue

@@ -125,7 +125,12 @@ export default {
         }
     },
     mounted() {
-        
+        this.xData = this.typeValue.type_data.map(ele => {
+            return ele.name;
+        });
+        this.yData = this.typeValue.type_data.map(ele => {
+            return ele.quantity;
+        });
         this.drawBar();
     },
     watch: {

src/components/chart/lineChart.vue

@@ -69,22 +69,23 @@ export default {
     },
     created() {
         // console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
-
     },
 
     methods: {
-        drawLine(newVal, title) {
+        drawLine() {
             let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
             if (myChart == null) {
                 myChart = this.$echarts.init(this.$refs.lineChart);
             }
-            // var series = []
-
-            
-
-
             // myChart.showLoading()　　//开启loading
             let option = {
+                // title: {
+                //     show: true,
+                //     text: this.componentName + '-' + this.chartName + '-' + '曲线图',
+                //     textStyle: {
+                //         lineHeight: '30'
+                //     }
+                // },
                 legend: {},
                 grid: {
                     left: '2%',
@@ -138,139 +139,29 @@ export default {
                         }
                     }
                 ],
-                series: this.getMessage(newVal, title)
+                series: this.series
             };
-            myChart.setOption(option)
+            myChart.setOption(option)　　//再设置配置
-
+            // myChart.hideLoading()
+            // myChart.setOption(option);
+            // window.onresize = () => {  // 根据窗口大小变化图表自适应
+            //     myChart.resize();
+            // };
             window.addEventListener('resize', function () {
                 myChart.resize();
             });
-        },
-
-        getMessage(newVal, title) {
-            this.xData = newVal.map(val => {
-                return val.time;
-            });
-
-            var series = [
-                {
-                    name: '',
-                    type: 'line',
-                    symbolSize: 6,
-                    smooth: true,
-                    itemStyle: {
-                        color: '#fb864b',
-                        borderColor: '#fb864b'
-                        // borderWidth: 2
-                    },
-                    data: []
-                }
-            ];
-
-            if (title === '类型') {
-                this.tooltip = {
-                    formatter: '{a} {b}:{c}个',
-                    show: true,
-                    confine: true
-                };
-                series[0].name = '总量';
-                // 映射出类型数组
-                let arr = newVal.map(function (ele) {
-                    if (ele.type_data != null) {
-                        return ele.type_data;
-                    }
-                });
-                var mapN = [];
-                for (var t = 0; t < arr.length; t++) {
-                    for (var i = 0; i < arr[t].length; i++) {
-                        mapN.push(arr[t][i]);
-                    }
-                }
-                var lineArr = []
-                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);
-                    } else if (ele.name == '非机动车') {
-                        lineArr[1].data.push(ele.quantity);
-                    } else {
-                        lineArr[2].data.push(ele.quantity);
-                    }
-                });
-                for (let j = 0; j < lineArr.length; j++) {
-                    series.push(lineArr[j]);
-                }
-                // 总和数量
-                let mapNR1 = [];
-                newVal.map(function (ele) {
-                    if (ele.type_data != null) {
-                        var sum = ele.type_data.reduce(function (prev, cur) {
-                            return cur.quantity + prev;
-                        }, 0);
-                        mapNR1.push(sum);
-                    }
-                });
-                series[0].data = mapNR1;
-            } else if (title === '速度') {
-                this.tooltip = {
-                    formatter: '{a} {b}:{c}km/h',
-                    show: true,
-                    confine: true
-                };
-                // console.log("newVal",newVal)
-                series[0].data = newVal.map(val => {
-                    return val.speed;
-                });
-            } else if (title === '流量') {
-                series[0].data = newVal.map(ele => {
-                    return ele.in_flow + ele.out_flow;
-                });
-            } else if (title === '车头时距') {
-                this.tooltip = {
-                    formatter: '{a} {b}:{c}/s',
-                    show: true,
-                    confine: true
-                };
-                series[0].data = newVal.map(val => {
-                    return val.headway;
-                });
-            } else if (title === '排队数') {
-                series[0].data = newVal.map(val => {
-                    return val.n_queue;
-                });
-            } else if (title === '检测数') {
-                series[0].data = newVal.map(val => {
-                    return val.n_stay;
-                });
-            } else if (title === '延误') {
-                series[0].data = newVal.map(val => {
-                    return val.ave_delay;
-                });
-            } else if (title === '拥堵') {
-                series[0].data = newVal.map(val => { });
-            }
-            console.log(series,'折线图数据');
-            return series
         }
     },
     mounted() {
-        // this.drawLine();
+        this.drawLine();
-        // this.getMessage(this.list)
+        console.log(this.$parent.dataArr, '父组件的dataArr');
-        // console.log(this.$parent.dataArr, '父组件的dataArr');
+    },
-        // this.$set(this.$parent.dataArr)
+    computed: {
+        listTotal() {
+            return JSON.parse(JSON.stringify(this.$parent.dataArr))
+        }
     },
     watch: {
-<<<<<<< HEAD
-=======
         list: {
             handler(newVal) {
             console.log("newVal",newVal)
@@ -431,7 +322,6 @@ export default {
         },
 
 
->>>>>>> 50ae7f7e6c71ffc8022c17104f1cd97b91690446
     }
 };
 </script>

src/components/chart/regionTable.vue

@@ -12,7 +12,7 @@
         </div>
 
 
-        <div v-if="msg" class="regionBox">
+        <div v-if="msg">
             <!-- 触发 -->
             <el-table :data="msg" style="width: 100%" v-if="triggerType == '触发' ">
                 <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
@@ -186,13 +186,7 @@ export default {
     }
 };
 </script>
-<style scoped lang="scss">
+<style scoped>
-/deep/ .el-table{
-    height: 709px !important;
-    overflow-y: scroll;
-    
-}
-.el-table::-webkit-scrollbar { width: 0 !important }
 .tableContent {
     position: relative;
 }

src/components/chart/tableShow.vue

@@ -27,7 +27,6 @@
                         <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
                         <span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
                         <span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
-                        <span v-if="scope.row.type == 'Person|Motor Vehicle'">行人|机动车</span>
                         <span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
                         <span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
                         <span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
@@ -177,13 +176,7 @@ export default {
     mounted() { }
 };
 </script>
-<style scoped lang="scss">
+<style scoped>
-/deep/ .el-table{
-    height: 709px !important;
-    overflow-y: scroll;
-    
-}
-.el-table::-webkit-scrollbar { width: 0 !important }
 .tableContent {
     position: relative;
 }

src/components/target/typeChart.vue

@@ -1,12 +1,11 @@
-<template>
+<template><!-- 触发类型 -->
-    <!-- 触发类型 -->
     <div class="setion">
         <p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p>
         <!-- 触发数据数值渲染 -->
-        <div class="typeContent">
+        <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 dataArr[0].type_data" :key="i"
+                    <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 />
@@ -14,7 +13,7 @@
                         </div>
                         <div>
                             <div>
-                                {{ dataArr[0].time ? dataArr[0].time : '' }}
+                                {{ typeValue.time ? typeValue.time : '' }}
                             </div>
                         </div>
                     </el-card>
@@ -25,7 +24,7 @@
                     <div v-if="title == '类型'">
                         <span style="font-size: 15px;">类型数量总和</span><br />
                         <span style="font-size: 30px; font-weight: bold">
-                            {{ }}
+                            {{ this.total }}
                         </span>
                     </div>
                     <div style="font-size: 30px; font-weight: bold" v-if="title == '速度'">
@@ -68,9 +67,9 @@
             <div class="tableTitle" v-if="dataArr&& dataArr.length != 0 && dataArr!=undefined">
                 <div>
                     <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 style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' +
+                    ></span>
-                        triggerType }}</span>
+                    <span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' + triggerType }}</span>
                 </div>
                 <div class="tableTime">
                     {{ dataArr[0].time ? dataArr[0].time : '' }}
@@ -85,10 +84,6 @@
         </div>
         <div class="border" v-if="echartArr.includes('曲线图')">
             <detailDialog />
-<<<<<<< HEAD
-            <lineChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="dataArr"
-                :status="triggerType" :title="title" :typeValue="typeValue" ref="lineChartRef" />
-=======
             <lineChart
           
                 :componentName="componentName"
@@ -99,7 +94,6 @@
                 :title="title"
                 :typeValue="typeValue"
             />
->>>>>>> 50ae7f7e6c71ffc8022c17104f1cd97b91690446
         </div>
         <div class="border" v-if="echartArr.includes('饼状图')">
             <detailDialog />
@@ -155,12 +149,9 @@ export default {
         };
     },
     created() { 
-        console.log(this.title + 'TYPECHARTdataArr', this.dataArr)
+       
     },
     methods: {
-<<<<<<< HEAD
-        // 计算类型的数值   
-=======
         // 计算类型的数值
         getNewQueue(dataArr){
             console.log("计算类型的数值",dataArr)
@@ -179,40 +170,22 @@ export default {
 
             }
         }
->>>>>>> 50ae7f7e6c71ffc8022c17104f1cd97b91690446
     },
 
-    computed: {
+    computed: {},
-        // 获取类型的总数量
-        getTotal() {
-            return this.dataArr[0].type_data((pre, cur) => {
-                return pre + cur
-            }, 0)
-        }
-    },
     mounted() { },
     watch: {
         // 监听触发数据
         dataArr: {
             handler(newVal) {
-<<<<<<< HEAD
-
-=======
                 console.log('dataArr', newVal);
                 this.getNewQueue(newVal)
->>>>>>> 50ae7f7e6c71ffc8022c17104f1cd97b91690446
             },
 
             immediate: true
         },
         typeValue: {
             handler(newVal) {
-<<<<<<< HEAD
-
-
-            },
-            immediate: true
-=======
                 this.total = 0;
                 
                 if (this.title == '类型') {
@@ -221,7 +194,6 @@ export default {
                     });
                 }
             }
->>>>>>> 50ae7f7e6c71ffc8022c17104f1cd97b91690446
         }
         // cycleTimeData: {
         //     handler(newVal) {

src/views/bounced/dataBoard.vue

@@ -25,11 +25,11 @@
                                                     :echartArr="o.presentationForm" :dataArr="o.trigger"
                                                     :title="o.componentName.split('_')[0]" :chartName="o.combinationName" />
                                                 <!--触发的组件  -->
-                                                <typeChart ref="typeChartRef" v-if="o.timeMode === '触发'"
+                                                <typeChart v-if="o.timeMode === '触发'" :pageType="o.graphicType"
-                                                    :pageType="o.graphicType" :triggerType="o.timeMode"
+                                                    :triggerType="o.timeMode" :componentName="o.componentName"
-                                                    :componentName="o.componentName" :dataArr="o.trigger"
+                                                    :dataArr="o.trigger" :echartArr="o.presentationForm"
-                                                    :echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
+                                                    :title="o.componentName.split('_')[0]" :chartName="o.combinationName"
-                                                    :chartName="o.combinationName" :typeValue="typeTimeMode" />
+                                                    :typeValue="typeTimeMode" />
                                                 <typeChart v-if="o.timeMode === '周期时刻'" :pageType="o.graphicType"
                                                     :triggerType="o.timeMode" :componentName="o.componentName"
                                                     :dataArr="o.cycleTimeData" :echartArr="o.presentationForm"
@@ -339,10 +339,7 @@ export default {
             typeTimeMode: {},
             // 周期时刻的数值看板展示
             typeCycleTimeData: {},
-            typeCycleStatistics: {},
+            typeCycleStatistics: {}
-
-            // 各个组件分类
-            classify: []
         };
     },
     // beforeCeated(){
@@ -354,15 +351,6 @@ export default {
     methods: {
         getNew() {
             // this.idVal = ;
-<<<<<<< HEAD
-            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();
-                }
-            });
-=======
         getComponentSection({ VideoId: this.$route.query.id ,Number:10}).then(res => {
             if (res.data.code == 200) {
                 console.log("res.data.data",res.data.data)
@@ -370,7 +358,6 @@ export default {
                 this.siftData();
             }
         });
->>>>>>> 50ae7f7e6c71ffc8022c17104f1cd97b91690446
         },
         siftData() {
             this.sectionArr=[]
@@ -388,11 +375,7 @@ export default {
                 this.acticveName = [];
                 this.componentList.forEach(val => {
                     if (item.title == val.combinationName) {
-<<<<<<< HEAD
-                        this.classify.push(val)
-=======
                          console.log("val.combinationName",val.combinationName)
->>>>>>> 50ae7f7e6c71ffc8022c17104f1cd97b91690446
                         item.children.push(val);
                     }
                     this.acticveName.push(val.analogAreaComponentId);
@@ -418,7 +401,7 @@ export default {
                 downPulls1[i].style.cssText = 'transition: all 0.5s linear;';
                 // sections[i].style.height = '500px';
                 if (sectionBox[i] != undefined) {
-
+                    // sectionBox[i].style.height = '48vh';
                 }
             }
         },
@@ -440,15 +423,6 @@ export default {
     },
     mounted() { },
     watch: {
-        // acticveName: {
-        //     handler(newVal) {
-        //         if (newVal != 'second') {
-        //             // 组件数据赋空
-        //             this.classify = []
-        //         }
-        //     }
-
-        // },
         // 触发的原始数据
         triggerData: {
             handler(newVal, oldVal) { },
@@ -460,15 +434,6 @@ export default {
             handler(newVal) {
                 this.triggerList = newVal;
                 // 触发数据
-<<<<<<< HEAD
-                console.log(newVal, 'triggerlistData');
-                var _this = this
-                if (newVal.length != 0 && _this.sectionData) {
-                    _this.classify.forEach((ele, index) => {
-
-                        if (ele.trigger == undefined && ele.timeMode == '触发') {
-                            ele.trigger = [];
-=======
                 // console.log(newVal, 'triggerlistData');
                  console.log(this.componentList, 'this.componentList');
                 this.componentList.forEach(ele => {
@@ -489,36 +454,9 @@ export default {
                                 }
                                 ele.trigger.unshift(item);
                             }
->>>>>>> 50ae7f7e6c71ffc8022c17104f1cd97b91690446
                         }
-                        newVal.forEach((item) => {
-                            if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {
-                                if (ele.trigger.length == 10) {
-                                    ele.trigger.splice(newVal.length - 1, 1);
-                                } else {
-                                    item.time = item.time.split('.')[0];
-                                    // 该时间的触发数据
-                                    if (item.type_data != null) {
-                                        _this.typeTimeMode = item
-                                    }
-                                    ele.trigger.unshift(item);
-                                    _this.$nextTick(() => {
-                                        console.log(index, '满足条件的索引');
-                                        console.log(_this.$refs.typeChartRef[index], index, '...........');
-                                        if (_this.$refs.typeChartRef[index] != undefined) {
-                                            console.log(_this.$refs.typeChartRef[index].dataArr, '数据');
-                                            _this.$refs.typeChartRef[index].$refs.lineChartRef.drawLine(ele.trigger, ele.componentName.split('_')[0])
-
-                                        }
-                                    })
-                                }
-                            }
-
                     });
                 });
-
-
-                }
             },
             immediate: true
         },
@@ -535,13 +473,10 @@ export default {
                             if (
                                 ele.analogAreaComponentId == item.component_id &&
                                 ele.timeMode == '周期时刻'
-<<<<<<< HEAD
-=======
                                 
->>>>>>> 50ae7f7e6c71ffc8022c17104f1cd97b91690446
                             ) {
                                 if (ele.cycleTimeData.length == 10) {
-                                    ele.cycleTimeData.splice(newVal.length - 1, 1);
+                                    ele.cycleTimeData.slice(ele.cycleTimeData.length - 1, 0);
                                 } else {
                                     item.time = item.time.split('.')[0];
                                     if (item.type_data != null) {
@@ -557,9 +492,6 @@ export default {
             },
             immediate: true
         },
-<<<<<<< HEAD
-        cycleStatistics: {
-=======
         // 周期统计数据
         // cycleStatistics:{
         //     handler(newVal){
@@ -567,7 +499,6 @@ export default {
         //     }
         // }
         cycleStatisticsData: {
->>>>>>> 50ae7f7e6c71ffc8022c17104f1cd97b91690446
             handler(newVal) {
 
                 if (newVal.length != 0 && this.sectionData) {
@@ -577,13 +508,8 @@ export default {
                         }
                         newVal.forEach(item => {
                             if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期统计') {
-<<<<<<< HEAD
-                                if (ele.cycleStatistics.length == 10) {
-                                    ele.cycleStatistics.splice(newVal.length - 1, 1);
-=======
                                 if (ele.cycleStatisticsData.length == 10) {
                                     ele.cycleStatisticsData.pop();
->>>>>>> 50ae7f7e6c71ffc8022c17104f1cd97b91690446
                                 } else {
                                     
                                     item.time = item.time.split('.')[0];