代码提交

src/components/chart/barChart.vue

@@ -125,12 +125,7 @@ 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,23 +69,22 @@ export default {
     },
     created() {
         // console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
+
     },
 
     methods: {
-        drawLine() {
+        drawLine(newVal, title) {
             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%',
@@ -139,29 +138,139 @@ export default {
                         }
                     }
                 ],
-                series: this.series
+                series: this.getMessage(newVal, title)
             };
-            myChart.setOption(option)　　//再设置配置
-            // myChart.hideLoading()
-            // myChart.setOption(option);
-            // window.onresize = () => {  // 根据窗口大小变化图表自适应
-            //     myChart.resize();
-            // };
+            myChart.setOption(option)
+
             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();
-        console.log(this.$parent.dataArr, '父组件的dataArr');
-    },
-    computed: {
-        listTotal() {
-            return JSON.parse(JSON.stringify(this.$parent.dataArr))
-        }
+        // this.drawLine();
+        // this.getMessage(this.list)
+        // console.log(this.$parent.dataArr, '父组件的dataArr');
+        // this.$set(this.$parent.dataArr)
     },
     watch: {
+<<<<<<< HEAD
+=======
         list: {
             handler(newVal) {
             console.log("newVal",newVal)
@@ -322,6 +431,7 @@ export default {
         },
 
 
+>>>>>>> 50ae7f7e6c71ffc8022c17104f1cd97b91690446
     }
 };
 </script>

src/components/chart/regionTable.vue

@@ -12,7 +12,7 @@
         </div>
 
 
-        <div v-if="msg">
+        <div v-if="msg" class="regionBox">
             <!-- 触发 -->
             <el-table :data="msg" style="width: 100%" v-if="triggerType == '触发' ">
                 <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
@@ -186,7 +186,13 @@ export default {
     }
 };
 </script>
-<style scoped>
+<style scoped lang="scss">
+/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,6 +27,7 @@
                         <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>
@@ -176,7 +177,13 @@ export default {
     mounted() { }
 };
 </script>
-<style scoped>
+<style scoped lang="scss">
+/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,11 +1,12 @@
-<template><!-- 触发类型 -->
+<template>
+    <!-- 触发类型 -->
     <div class="setion">
         <p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p>
         <!-- 触发数据数值渲染 -->
-        <div class="typeContent" v-if="triggerType == '触发' || '周期时刻'">
-            <div v-if="dataArr && dataArr.length != 0 && dataArr!=undefined">
+        <div class="typeContent">
+            <div v-if="dataArr && dataArr.length != 0 && dataArr != undefined">
                 <div v-if="title == '类型'" style="display:flex">
-                    <el-card v-for="(n, i) in typeValue.type_data" :key="i"
+                    <el-card v-for="(n, i) in dataArr[0].type_data" :key="i"
                         style="width: 150px; margin-bottom: 20px; text-align: center">
                         <div>
                             <span style="font-size: 15px;">{{ n.name }}</span><br />
@@ -13,18 +14,18 @@
                         </div>
                         <div>
                             <div>
-                                {{ typeValue.time ? typeValue.time : '' }}
+                                {{ dataArr[0].time ? dataArr[0].time : '' }}
                             </div>
                         </div>
                     </el-card>
                 </div>
             </div>
             <el-card v-show="echartArr.includes('数值')" style="width: 150px; margin-bottom: 20px; text-align: center">
-                <div v-if="dataArr&& dataArr.length != 0 && dataArr!=undefined">
+                <div v-if="dataArr && dataArr.length != 0 && dataArr != undefined">
                     <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 == '速度'">
@@ -64,12 +65,12 @@
             </el-card>
         </div>
         <div v-show="echartArr.includes('表格')">
-            <div class="tableTitle" v-if="dataArr&& dataArr.length != 0 && dataArr!=undefined">
+            <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>
-                    <span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' + triggerType }}</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>
                 </div>
                 <div class="tableTime">
                     {{ dataArr[0].time ? dataArr[0].time : '' }}
@@ -84,6 +85,10 @@
         </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"
@@ -94,6 +99,7 @@
                 :title="title"
                 :typeValue="typeValue"
             />
+>>>>>>> 50ae7f7e6c71ffc8022c17104f1cd97b91690446
         </div>
         <div class="border" v-if="echartArr.includes('饼状图')">
             <detailDialog />
@@ -148,10 +154,13 @@ export default {
             queue:'',
         };
     },
-    created() { 
-       
+    created() {
+        console.log(this.title + 'TYPECHARTdataArr', this.dataArr)
     },
     methods: {
+<<<<<<< HEAD
+        // 计算类型的数值   
+=======
         // 计算类型的数值
         getNewQueue(dataArr){
             console.log("计算类型的数值",dataArr)
@@ -170,22 +179,40 @@ 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 == '类型') {
@@ -194,6 +221,7 @@ 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 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 ref="typeChartRef" 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"
@@ -339,7 +339,10 @@ export default {
             typeTimeMode: {},
             // 周期时刻的数值看板展示
             typeCycleTimeData: {},
-            typeCycleStatistics: {}
+            typeCycleStatistics: {},
+
+            // 各个组件分类
+            classify: []
         };
     },
     // beforeCeated(){
@@ -351,6 +354,15 @@ 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)
@@ -358,6 +370,7 @@ export default {
                 this.siftData();
             }
         });
+>>>>>>> 50ae7f7e6c71ffc8022c17104f1cd97b91690446
         },
         siftData() {
             this.sectionArr=[]
@@ -375,7 +388,11 @@ 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);
@@ -401,7 +418,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';
+
                 }
             }
         },
@@ -423,6 +440,15 @@ export default {
     },
     mounted() { },
     watch: {
+        // acticveName: {
+        //     handler(newVal) {
+        //         if (newVal != 'second') {
+        //             // 组件数据赋空
+        //             this.classify = []
+        //         }
+        //     }
+
+        // },
         // 触发的原始数据
         triggerData: {
             handler(newVal, oldVal) { },
@@ -434,6 +460,15 @@ 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 => {
@@ -454,9 +489,36 @@ 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
         },
@@ -473,10 +535,13 @@ export default {
                             if (
                                 ele.analogAreaComponentId == item.component_id &&
                                 ele.timeMode == '周期时刻'
+<<<<<<< HEAD
+=======
                                 
+>>>>>>> 50ae7f7e6c71ffc8022c17104f1cd97b91690446
                             ) {
                                 if (ele.cycleTimeData.length == 10) {
-                                    ele.cycleTimeData.slice(ele.cycleTimeData.length - 1, 0);
+                                    ele.cycleTimeData.splice(newVal.length - 1, 1);
                                 } else {
                                     item.time = item.time.split('.')[0];
                                     if (item.type_data != null) {
@@ -492,6 +557,9 @@ export default {
             },
             immediate: true
         },
+<<<<<<< HEAD
+        cycleStatistics: {
+=======
         // 周期统计数据
         // cycleStatistics:{
         //     handler(newVal){
@@ -499,6 +567,7 @@ export default {
         //     }
         // }
         cycleStatisticsData: {
+>>>>>>> 50ae7f7e6c71ffc8022c17104f1cd97b91690446
             handler(newVal) {
 
                 if (newVal.length != 0 && this.sectionData) {
@@ -508,8 +577,13 @@ 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];