代码提交

src/components/chart/lineChart.vue

@@ -3,9 +3,9 @@
         <div class="tableTitle">
             <div>
                 <span
-                    style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
+                    style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"></span>
-                ></span>
+                <span style="font-size:18px;">{{ this.componentName + '-' + this.chartName + '-' + '曲线图' + '-' + status,
-                <span style="font-size:18px;">{{this.componentName + '-' + this.chartName + '-' + '曲线图'+'-'+status, }}</span>
+                                    }}</span>
             </div>
         </div>
         <div id="lineChart" ref="lineChart" style="width: 100%; height: 300px"></div>
@@ -67,12 +67,14 @@ export default {
     created() {
         // console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
     },
+
     methods: {
         drawLine() {
             let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
             if (myChart == null) {
                 myChart = this.$echarts.init(this.$refs.lineChart);
             }
+            // myChart.showLoading()　　//开启loading
             let option = {
                 // title: {
                 //     show: true,
@@ -136,8 +138,9 @@ export default {
                 ],
                 series: this.series
             };
-
+            myChart.setOption(option)　　//再设置配置
-            myChart.setOption(option);
+            // myChart.hideLoading()
+            // myChart.setOption(option);
             // window.onresize = () => {  // 根据窗口大小变化图表自适应
             //     myChart.resize();
             // };
@@ -148,12 +151,14 @@ export default {
     },
     mounted() {
         this.drawLine();
+        console.log(this.title);
     },
     watch: {
         list: {
             handler(newVal) {
                 if (newVal) {
-                    
+                    console.log(this.title);
+                    console.log(newVal, this.title + '折现图的数据');
                     // x轴的数据
                     this.xData = newVal.map(val => {
                         return val.time;
@@ -195,23 +200,32 @@ export default {
                                 mapN.push(arr[t][i]);
                             }
                         }
-                        var lineArr = [];
+                        var lineArr = [{
-                        // 遍历需要多少条类型折线
+                            name: '机动车',
-                        if (this.typeValue) {
-                            console.log("this.typeValue.type_data",this.typeValue.type_data)
-                          if (this.typeValue.type_data!=undefined) {  
-                            this.typeValue.type_data.forEach(ele => {
-                                lineArr.push({
-                                    name: ele.name,
                             type: 'line',
                             data: [],
                             smooth: true
-                                });
+                        }, {
-                            });
+                            name: '非机动车',
-                          }
+                            type: 'line',
-                        }
+                            data: [],
-
+                            smooth: true
-                        // 筛选类型的数量
+                        }, {
+                            name: '行人',
+                            type: 'line',
+                            data: [],
+                            smooth: true
+                        }];
+                        // 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);
@@ -265,10 +279,14 @@ export default {
                         this.series[0].data = newVal.map(val => {
                             return val.headway;
                         });
-                    } else if (this.title == '排队数') {
+                    } else if (this.title == '排队数' && this.status == '触发') {
                         this.series[0].data = newVal.map(val => {
                             return val.n_queue;
                         });
+                    } else if (this.title == '排队数' && this.status == '周期统计') {
+                        this.series[0].data = newVal.map(val => {
+                            return val.ave_queue;
+                        });
                     } else if (this.title == '检测数') {
                         this.series[0].data = newVal.map(val => {
                             return val.n_stay;
@@ -280,17 +298,12 @@ export default {
                     } else if (this.title == '拥堵') {
                         this.series[0].data = newVal.map(val => { });
                     }
-                    if (this.$refs.lineChart) {
-                        this.$nextTick(() => {
-                            this.drawLine();
-                        });
-                    }
-                }
-            },
-            immediate: true
-        },
-        typeValue(newVal){
 
+                    this.drawLine()
+
+                }
+            },
+            deep: true
         }
     }
 };

src/components/target/typeChart.vue

@@ -1,5 +1,4 @@
-<template>
+<template><!-- 触发类型 -->
-<!-- 触发类型 -->
     <div class="setion">
         <p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p>
         <!-- 触发数据数值渲染 -->
@@ -21,7 +20,7 @@
                 </div>
             </div>
             <el-card v-show="echartArr.includes('数值')" style="width: 150px; margin-bottom: 20px; text-align: center">
-                <div v-if="dataArr">
+                <div v-if="dataArr && dataArr.length != 0">
                     <div v-if="title == '类型'">
                         <span style="font-size: 15px;">类型数量总和</span><br />
                         <span style="font-size: 30px; font-weight: bold">
@@ -69,7 +68,8 @@
                 <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="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' +
+                        triggerType
                     }}</span>
                 </div>
                 <div class="tableTime">
@@ -139,7 +139,9 @@ export default {
             valueShow: {}
         };
     },
-    created() { },
+    created() { 
+       
+    },
     methods: {
         // 计算类型的数值
     },

src/views/bounced/analysisConfiguration.vue

@@ -737,9 +737,9 @@ export default {
         OnSceneload(newV) {
               var ip = window.location.host;
             this.ipData = 'http://' + ip.split(':')[0] + ':5000';
-            // document.getElementById('mapModule').contentWindow.getIpData(this.ipData);
+            document.getElementById('mapModule').contentWindow.getIpData(this.ipData);
             this.$refs.analysisWeb.contentWindow.getIpData('http://172.16.1.168:5000');
-            this.$refs.analysisWeb.contentWindow.getDianwei(this.$route.query.id);
+            // this.$refs.analysisWeb.contentWindow.getDianwei(this.$route.query.id);
             this.unityDone = true;
         },
         handleDeleteDian(row, idx) {
@@ -1046,8 +1046,8 @@ export default {
             //   const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://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/';
             const options = {
                 // 配置
                 // 测试：订阅本机IP

src/views/bounced/dataBoard.vue

@@ -16,6 +16,7 @@
                                     </p>
                                     <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span>
                                 </div>
+                                <div v-if="s.children">
                                     <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"
@@ -38,6 +39,7 @@
                                             :title="o.componentName.split('_')[0]" :chartName="o.combinationName"
                                             :typeValue="typeCycleStatistics" />
                                     </div>
+                                </div>
                                 <!-- :data="triggerList.length != 0 ? triggerList : tableData" -->
                             </div>
                         </template>
@@ -90,6 +92,12 @@ export default {
                 return [];
             }
         },
+        componentList:{
+            type:Array,
+            default(){
+                return []
+            }
+        }
     },
     data() {
         return {
@@ -339,43 +347,37 @@ export default {
             typeValue: {},
             // 周期时刻的数值看板展示
             typeCycleTimeData: {},
-            typeCycleStatistics: {}
+            typeCycleStatistics: {},
+            nw: '1'
+
         };
     },
+    // beforeCeated(){
+
+    // },
     created() {
-        // this.idVal = this.$route.query.id;
+        this.idVal = this.$route.query.id;
-        // getComponentSection({ VideoId: this.idVal }).then((res) => {
-        //     if (res.data.code == 200) {
-        //         this.componentList = res.data.data
-        //         console.log(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) {
-        //     }
-        // });
-
-    },
-
-    methods: {
-
-        siftData(list) {
-
         this.sectionData = []
         this.sectionArr = []
+        // if(this.nw=='second'){
+
+        // }
+            this.getNEW()
+        
+    },
+    methods: {
+        getNEW() {
+            getComponentSection({ VideoId: this.$route.query.id }).then((res) => {
+                if (res.data.code == 200) {
+                    this.componentList = res.data.data
+                    this.siftData(this.componentList)
+                } else if (res.data.code == 404) {
+                }
+            });
+        },
+        siftData(list) {
+            // this.sectionArr = []
+            // this.sectionData = []
             list.forEach((val) => {
                 this.sectionArr.push(val.combinationName);
                 this.sectionArr = Array.from(new Set(this.sectionArr));
@@ -393,7 +395,7 @@ export default {
                 });
                 return item;
             });
-            console.log(this.sectionData, '筛选数据');
+
         },
         // 组件图标点击下拉事件
         sectionHandle(i) {
@@ -420,41 +422,36 @@ export default {
 
             }
         },
-
+        // channge(oldVal, newVal) {
+        //     if (newVal == "second") {
+        //         this.getNEW()
+        //     } else if (oldVal == "second") {
+        //         this.getNEW()
+        //     }
+        // }
 
         // 触发数据的类型数值
 
     },
     mounted() {
-        getComponentSection({ VideoId: this.$route.query.id }).then(res => {
+        // getComponentSection({ VideoId: this.$route.query.id }).then(res => {
-            if (res.data.code == 200) {
+        //     if (res.data.code == 200) {
-                console.log(res.data.data, '请求数据');
+        //         console.log(res.data.data, '请求数据');
-                this.componentList = res.data.data;
+        //         this.componentList = res.data.data;
-                this.siftData(this.componentList);
+        //         this.siftData(this.componentList);
-            } else if (res.data.code == 404) {
+        //     } else if (res.data.code == 404) {
-            }
+        //     }
-        });
+        // });
     },
 
 
     watch: {
-        activeName: {
-            handler(newVal) {
-                console.log("newVal", newVal)
-                if (newVal == "second") {
-                    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(this.componentList);
-                        } else if (res.data.code == 404) {
-                        }
-                    });
-                }
         
-            },
+
-            immediate: true
+        //     },
-        },
+        //     immediate: true
+        // },
+        // activeName: 'channge',
         // 触发的原始数据
         triggerData: {
             handler(newVal, oldVal) {
@@ -467,9 +464,8 @@ export default {
             handler(newVal) {
                 this.triggerList = newVal
                 // 触发数据
-                console.log(newVal, 'triggerlistData');
-                if (newVal && this.sectionData.length!=0) {
                 
+                if (newVal && this.sectionData.length != 0) {
                     this.componentList.forEach(ele => {
                         if (ele.trigger == undefined && ele.timeMode == '触发') {
                             ele.trigger = []
@@ -501,14 +497,13 @@ export default {
         cycleTimeData: {
             handler(newVal) {
                 // 监听到打印周期时刻数据
-                console.log(newVal, '440');
                 if (newVal.length != 0 && this.sectionData) {
                     this.componentList.forEach(ele => {
                         if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
                             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 == '周期时刻' ) {
                                 if (ele.cycleTimeData.length == 10) {
                                     ele.cycleTimeData.slice(ele.cycleTimeData.length - 1, 0)
                                 } else {
@@ -522,7 +517,6 @@ export default {
                             }
                         })
                     })
-                    console.log(this.sectionData, '455');
                 }
             },
             immediate: true
@@ -535,7 +529,6 @@ export default {
         // }
         cycleStatistics: {
             handler(newVal) {
-                console.log(newVal, '周期统计');
 
                 if (newVal.length != 0 && this.sectionData) {
                     this.componentList.forEach(ele => {
@@ -563,7 +556,6 @@ export default {
                         });
                     });
                 }
-                console.log(this.sectionData, '周期统计筛选数据');
             }
         },
 

src/views/bounced/form.vue

@@ -409,7 +409,10 @@ export default {
     getDataByMqtt(url, topic, cIdNum) {
       const clientId = "test_id_" + String(new Date().getTime()); // 用户名
     //   const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
-       const host = 'ws://172.16.1.168:10087/'; 
+       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 options = {
         // 配置

src/views/index.vue

@@ -6,26 +6,15 @@
             <el-tabs type="border-card" v-model="activeName" >
                 <el-tab-pane :label="titName" name="first">
                     <div class="mapModuleApp">
-                        <iframe
+                        <iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height:100%;"
-                            id="mapModule"
+                            scrolling="no" v-if="videoUnityShow"></iframe>
-                            src="./VideoWeb/index.html"
-                            frameborder="0"
-                            style="width: 100%; height:100%;"
-                            scrolling="no"
-                            v-if="videoUnityShow"
-                        ></iframe>
                         <!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none" ref="iframe"></iframe> -->
                         <el-empty :description="description" v-if="videoAnalysisShow"> </el-empty>
                     </div>
                 </el-tab-pane>
                 <el-tab-pane label="数据看板" name="second">
-                    <dataBoard
+                    <dataBoard ref="dataBoardRef" :activeName="activeName" :triggerData="triggerData" :triggerListData="triggerListData"
-                        :activeName="activeName"
+                        :cycleTimeData="cycleTimeData" :cycleStatistics="cycleStatistics"  v-if="activeName='second'"></dataBoard>
-                        :triggerData="triggerData"
-                        :triggerListData="triggerListData"
-                        :cycleTimeData="cycleTimeData"
-                        :cycleStatistics="cycleStatistics"
-                    ></dataBoard>
                 </el-tab-pane>
                 <el-tab-pane label="分析配置" name="third">
                     <analysisConfiguration :analysisConfigurationdata="analysisConfigurationdata"></analysisConfiguration>
@@ -37,31 +26,12 @@
             </el-tabs>
             <!-- <el-button class="videoAnalysis" type="primary" size="mini" @click="videoAnalysisBtn" v-if="videoAnalysisShow" :disabled='disabledVideoAnalysis'
                 >视频分析</el-button> -->
-            <el-button
+            <el-button class="trafficAnalysis" type="primary" plain size="mini" @click="trafficAnalysisBtn"
-                class="trafficAnalysis"
+                v-if="trafficAnalysisShow" :disabled="disabledTrafficAnalysis">交通分析</el-button>
-                type="primary"
-                plain
-                size="mini"
-                @click="trafficAnalysisBtn"
-                v-if="trafficAnalysisShow"
-                :disabled="disabledTrafficAnalysis"
-                >交通分析</el-button
-            >
         </div>
-        <el-drawer
+        <el-drawer class="new-dialog" :visible.sync="dialogFormVisible" direction="btt" custom-class="demo-drawer"
-            class="new-dialog"
+            ref="drawer" :modal="false" :close-on-click-modal="false" v-alterELDialogMarginTop="{ marginTop: '0vh' }"
-            :visible.sync="dialogFormVisible"
+            width="100%" :wrapperClosable="false" :with-header="false" size="100%">
-            direction="btt"
-            custom-class="demo-drawer"
-            ref="drawer"
-            :modal="false"
-            :close-on-click-modal="false"
-            v-alterELDialogMarginTop="{ marginTop: '0vh' }"
-            width="100%"
-            :wrapperClosable="false"
-            :with-header="false"
-            size="100%"
-        >
             <div class="formBox">
                 <el-form ref="form" :model="form" label-width="80px" :inline="true">
                     <el-form-item label="组件名称">
@@ -82,7 +52,8 @@
             </div>
         </el-drawer>
         <!-- 组件弹框 -->
-        <el-dialog :title="componentTitle + '指标组件'" width="40%" :visible.sync="component" :close-on-click-modal ="false" @close="closeComponentForm()">
+        <el-dialog :title="componentTitle + '指标组件'" width="40%" :visible.sync="component" :close-on-click-modal="false"
+            @close="closeComponentForm()">
             <el-form ref="form" :model="componentForm" label-width="150px">
                 <el-form-item label="名称：">
                     <el-input v-model="componentForm.componentName"></el-input>
@@ -93,14 +64,11 @@
                         <el-checkbox v-for="item in typeData" :label="item" :key="item">{{ item }}</el-checkbox>
                     </el-checkbox-group>
                 </el-form-item>
-                <el-form-item
+                <el-form-item label="数值筛选：" v-if="
-                    label="数值筛选："
-                    v-if="
                     componentForm.componentType != 'OD' &&
                     componentForm.componentType != '类型' &&
                     componentForm.componentType != '流量'
-                    "
+                ">
-                >
                     <el-input-number v-model="componentForm.startValue"></el-input-number>
                     <el-input-number v-model="componentForm.endValue" style="margin-left:5%"></el-input-number>
                 </el-form-item>
@@ -112,22 +80,15 @@
                 </el-form-item>
                 <el-form-item label="时间模式：">
                     <el-select v-model="componentForm.timeMode" placeholder="请选择时间模式">
-                        <el-option
+                        <el-option label="触发" value="触发"
-                            label="触发"
+                            v-if="componentForm.componentType != '延误' && componentForm.componentType != '拥堵'"></el-option>
-                            value="触发"
+                        <el-option label="周期时刻" value="周期时刻" v-if="
-                            v-if="componentForm.componentType != '延误' && componentForm.componentType != '拥堵'"
-                        ></el-option>
-                        <el-option
-                            label="周期时刻"
-                            value="周期时刻"
-                            v-if="
                             componentForm.componentType != '排队数' &&
                             componentForm.componentType != '检测数' &&
                             componentForm.componentType != '延误' &&
                             componentForm.componentType != '拥堵' &&
                             componentForm.componentType != '流量'
-                            "
+                        "></el-option>
-                        ></el-option>
                         <el-option label="周期统计" value="周期统计" v-if="componentForm.componentType != 'OD'"> </el-option>
                     </el-select>
                 </el-form-item>
@@ -168,11 +129,15 @@
                 <el-form-item label="展现形式：" v-if="componentForm.componentType != 'OD'">
                     <el-checkbox-group v-model="componentForm.presentation" @change="handlePresentation">
                         <el-checkbox label="数值" name="presentation"></el-checkbox>
-                        <el-checkbox label="表格" name="presentation" v-if="componentForm.componentType != '拥堵'"></el-checkbox>
+                        <el-checkbox label="表格" name="presentation"
+                            v-if="componentForm.componentType != '拥堵'"></el-checkbox>
                         <el-checkbox label="时间曲线图" name="type"></el-checkbox>
-                        <el-checkbox label="直方图" name="presentation" v-if="componentForm.componentType == '类型'"></el-checkbox>
+                        <el-checkbox label="直方图" name="presentation"
-                        <el-checkbox label="饼状图" name="presentation" v-if="componentForm.componentType == '类型'"></el-checkbox>
+                            v-if="componentForm.componentType == '类型'"></el-checkbox>
-                        <el-checkbox label="均值图" name="presentation" v-if="componentForm.componentType != '拥堵'"></el-checkbox>
+                        <el-checkbox label="饼状图" name="presentation"
+                            v-if="componentForm.componentType == '类型'"></el-checkbox>
+                        <el-checkbox label="均值图" name="presentation"
+                            v-if="componentForm.componentType != '拥堵' || componentForm.componentType != '流量' || componentForm.componentType != '类型' || componentForm.componentType != '延误'"></el-checkbox>
                     </el-checkbox-group>
                     <!-- <el-checkbox-group v-model="componentForm.presentation" @change="handlePresentation">
               <el-checkbox v-for="item in sectionals" :label="item.graphicName" :key="item.graphicId" >{{item.graphicName}}</el-checkbox>
@@ -370,7 +335,10 @@ export default {
                 videoType: '实时视频'
             },
             description: '请等待排队',
-            ipData: ''
+            ipData: '',
+
+
+            componentList:[]
         };
     },
 
@@ -422,6 +390,14 @@ export default {
     },
     mounted() { },
     methods: {
+        
+        // 数据看板的标签点击
+        // handleClick(tab, event) {
+        //     if(tab._props.name=='second'){
+        //         this.$refs.dataBoardRef.getNEW()
+        //     }
+
+        // },
         /** 创建mqtt */
         createMqtt() {
             //创建链接，接收数据
@@ -623,6 +599,7 @@ export default {
                         const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                         var detId = [];
                         const msgN = JSON.parse(temp);
+                        // console.log("trigger_msgN",msgN)
                         this.triggerListData = msgN;
                     } catch (error) { }
                     break;
@@ -1270,19 +1247,25 @@ export default {
 }
 
 .content-box::-webkit-scrollbar {
-    display: none; /* Chrome Safari */
+    display: none;
+    /* Chrome Safari */
 }
+
 .new-dialog {
     width: 49%;
     height: 11%;
     left: calc(24vw);
     top: 90vh;
-    bottom: 0 /* right:auto;; */;
+    bottom: 0
+        /* right:auto;; */
+    ;
 }
+
 .formBox {
     margin-top: 20px;
     margin-left: 20px;
 }
+
 /* .new-dialog .el-dialog {
     width:100%!important;
         margin: 0vh auto !important;
@@ -1293,13 +1276,17 @@ export default {
     margin: 0 auto 0px !important;
     /* margin-top: 0vh!important; */
 }
+
 .new-dialog .el-dialog__wrapper::-webkit-scrollbar {
-    display: none; /* Chrome Safari */
+    display: none;
+    /* Chrome Safari */
 }
+
 .new-dialog .customWidth {
     width: 100%;
     min-width: 150px;
 }
+
 .mapModuleApp {
     /* width:100%; */
     width: 1600px;
@@ -1307,6 +1294,7 @@ export default {
     display: inline-block;
     border: 1px soild #eee;
 }
+
 .el-drawer.btt,
 .el-drawer.ttb {
     width: 100%;
@@ -1324,11 +1312,13 @@ export default {
     height: 100%;
     width: 100%;
 }
+
 .videoAnalysis {
     position: absolute;
     right: 200px;
     top: 17px;
 }
+
 .trafficAnalysis {
     position: absolute;
     right: 100px;