Merge branch 'master' of http://gogs.renlianiot.com:4000/zmcoding/smart-tool-ui

src/views/dashboard/rladmin/components/DeviceDataChart.vue

@@ -8,6 +8,17 @@
         :bodyStyle="{height: '400px'}"
     >
         <template v-slot:content>
+                <div class="block">
+                    <el-date-picker
+                    v-model="value1"
+                    type="datetimerange"
+                    :picker-options="pickerOptions"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期">
+                    </el-date-picker>
+                    <el-button class="filter-item search" icon="el-icon-search" @click="handleSearch" >搜索</el-button >
+                </div>
             <base-pie-chart
                 :options="pieOptions"
                 width="40%"
@@ -63,7 +74,35 @@ export default {
                     command: 'full',
                     icon: 'full-screen',
                 }
-            ]
+            ],
+            value1: [new Date().getTime() - 3600 * 1000 * 24 * 7, new Date()],
+            pickerOptions: {
+                shortcuts: [{
+                    text: '最近一周',
+                    onClick(picker) {
+                    const end = new Date();
+                    const start = new Date();
+                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+                    picker.$emit('pick', [start, end]);
+                    }
+                }, {
+                    text: '最近一个月',
+                    onClick(picker) {
+                    const end = new Date();
+                    const start = new Date();
+                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                    picker.$emit('pick', [start, end]);
+                    }
+                }, {
+                    text: '最近三个月',
+                    onClick(picker) {
+                    const end = new Date();
+                    const start = new Date();
+                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                    picker.$emit('pick', [start, end]);
+                    }
+                }]
+            },
         }
     },
     watch: {
@@ -72,6 +111,9 @@ export default {
         }
     },
     methods: {
+        handleSearch(){
+
+        },
         // 初始化饼图统计数据
         initPieChart() {
             this.pieData = [];
@@ -218,5 +260,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+.block{
+    width:100%;
+    margin-bottom: 10px;
+}
+.filter-item{
+    margin-left:10px;
+}
 </style>

src/views/dashboard/rladmin/components/DeviceUseChart.vue

@@ -8,6 +8,17 @@
         :bodyStyle="{height: '400px'}"
     >
         <template v-slot:content>
+              <div class="block">
+                    <el-date-picker
+                    v-model="value1"
+                    type="datetimerange"
+                    :picker-options="pickerOptions"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期">
+                    </el-date-picker>
+                    <el-button class="filter-item search" icon="el-icon-search" @click="handleSearch" >搜索</el-button >
+                </div>
             <base-pie-chart
                 :options="pieOptions"
                 width="40%"
@@ -63,7 +74,35 @@ export default {
                     command: 'full',
                     icon: 'full-screen',
                 }
-            ]
+            ],
+            value1: [new Date().getTime() - 3600 * 1000 * 24 * 7, new Date()],
+            pickerOptions: {
+                shortcuts: [{
+                    text: '最近一周',
+                    onClick(picker) {
+                    const end = new Date();
+                    const start = new Date();
+                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+                    picker.$emit('pick', [start, end]);
+                    }
+                }, {
+                    text: '最近一个月',
+                    onClick(picker) {
+                    const end = new Date();
+                    const start = new Date();
+                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                    picker.$emit('pick', [start, end]);
+                    }
+                }, {
+                    text: '最近三个月',
+                    onClick(picker) {
+                    const end = new Date();
+                    const start = new Date();
+                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                    picker.$emit('pick', [start, end]);
+                    }
+                }]
+            },
         }
     },
     watch: {
@@ -72,6 +111,9 @@ export default {
         }
     },
     methods: {
+        handleSearch(){
+
+        },
         // 初始化饼图统计数据
         initPieChart() {
             this.pieData = [];
@@ -218,5 +260,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+.block{
+    width:100%;
+    margin-bottom: 10px;
+}
+.filter-item{
+    margin-left:10px;
+}
 </style>

src/views/map/gpsRouteDialog.vue

@@ -50,24 +50,7 @@
             align="center">
           </el-table-column>
 
-          <el-table-column label="GPS轨迹列表" >
-            <template #header>
-         
-              <el-select size="mini" style="display:inline-blocd;width:100px;" v-model="route_type" @change="queryStudentRoute">
-                <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-              <el-checkbox v-model="filterTrack" style="display:inline-blocd;width:100px;margin-left:10px;">
-                全部数据
-                <el-tooltip class="item" effect="dark" content="勾选后将不过滤任何数据，数据多时会导致加载慢" placement="top-end">
-                  <i class="el-icon-info" style="color:#409eff;"></i>
-                </el-tooltip>
-              </el-checkbox>
-            </template>
+          <el-table-column label="定位列表" >
             <template slot-scope="record">
               <div>
                 {{record.row.PassTime}}&nbsp;&nbsp;<i v-if="record.row.WifiAddress" class="wifi_icon">W</i><i v-else class="gps_icon">G</i><br/> 
@@ -95,7 +78,27 @@ export default {
       loading: false,
       dialog: false,
       title:'轨迹地图',
-      Routedata:[],
+      Routedata:[
+        {
+          PassTime:'2022-05-25 15:11:11',
+          Address:'浙江省杭州市滨江区华城和瑞科技广场',
+          Latitude:30.192001,
+          Longitude:120.20121,
+        },
+        {
+          PassTime:'2022-05-25 15:11:11',
+          Address:'浙江省杭州市滨江区滨安路跟江虹路交叉口',
+          Latitude:30.192797,
+          Longitude:120.207067,
+        },
+        {
+          PassTime:'2022-05-24 15:11:11',
+          Address:'浙江省杭州市滨江区江虹小区东门',
+          Latitude:30.202219,
+          Longitude:120.208827,
+        },
+        
+      ],
       map: null,
       center: '杭州市滨江区',
       zoom: 19,
@@ -103,16 +106,7 @@ export default {
       listControlOffset:{},
       route_type:'All',
       filterTrack:false,
-      options: [{
-          value: 'All',
-          label: '所有轨迹'
-        }, {
-          value: 'WiFi',
-          label: 'WiFi轨迹'
-        }, {
-          value: 'GPS',
-          label: 'GPS轨迹'
-        }],
+      markerIcons: 'https://rlfd.oss-cn-hangzhou.aliyuncs.com/smart_tool/beng.png',
       pickerOptions: {
           shortcuts: [
            {
@@ -166,14 +160,7 @@ export default {
           }]
         },
         timeRange: [new Date(new Date().toLocaleDateString()), new Date(new Date(new Date().toLocaleDateString()).getTime() + (24 * 60 * 60 * 1000)-1000)],
-        markerIcons: { // 覆盖物图标
-                origin: 'https://rlfd.oss-cn-hangzhou.aliyuncs.com/wxt_school/origin_icon.png', 
-                terminus: 'https://rlfd.oss-cn-hangzhou.aliyuncs.com/wxt_school/terminus_icon.png', 
-                alarm: 'https://rlfd.oss-cn-hangzhou.aliyuncs.com/wxt_school/alarm_icon.png', 
-                node_gps: 'https://rlfd.oss-cn-hangzhou.aliyuncs.com/wxt_school/node_gps.png', 
-                node_wifi: 'https://rlfd.oss-cn-hangzhou.aliyuncs.com/wxt_school/node_wifi.png', 
-                
-        },
+
         trackMarkers:[],
         currentRow: null,
      
@@ -186,22 +173,23 @@ export default {
 
 
     this.$nextTick(() => {
-      const query = { device_number: this.activeRfid}
-      this.$http.get('map/queryDeviceCurLocation',{ params: query }).then(res=>{
-          let pointInfo=res.data
-          var trackPoint = new BMap.Point(pointInfo.longitude, pointInfo.latitude);
-          let pointType = "terminus";
-          var pointIcon = new BMap.Icon(this.markerIcons[pointType], new BMap.Size(27, 32));
-          pointIcon.iconAnchor = new BMap.Point(5, 5);
-          pointIcon.shadow = "";
-          let trackMarker = new BMap.Marker(trackPoint, { icon: pointIcon });
-          this.map.addOverlay(trackMarker);
-          this.center=trackPoint
-          //this.map.centerAndZoom(trackPoint, 19);
-          this.queryStudentRoute();
-      }).catch(e => {
-        // this.loading = false;
-      });
+      
+      // const query = { device_number: this.activeRfid}
+      // this.$http.get('map/queryDeviceCurLocation',{ params: query }).then(res=>{
+      //     let pointInfo=res.data
+      //     var trackPoint = new BMap.Point(pointInfo.longitude, pointInfo.latitude);
+      //     let pointType = "terminus";
+      //     var pointIcon = new BMap.Icon(this.markerIcons[pointType], new BMap.Size(27, 32));
+      //     pointIcon.iconAnchor = new BMap.Point(5, 5);
+      //     pointIcon.shadow = "";
+      //     let trackMarker = new BMap.Marker(trackPoint, { icon: pointIcon });
+      //     this.map.addOverlay(trackMarker);
+      //     this.center=trackPoint
+      //     //this.map.centerAndZoom(trackPoint, 19);
+      //     this.queryStudentRoute();
+      // }).catch(e => {
+      //   // this.loading = false;
+      // });
       let topTables = document.getElementsByClassName('ontop-route-table');
       topTables.forEach(item => {
         item.onwheel = function(e) {
@@ -214,70 +202,67 @@ export default {
     init({ BMap, map }) {
       this.map = map;
       // 初始化地图,设置中心点坐标
-      // map.centerAndZoom("杭州市滨江区", 14);
+      // map.centerAndZoom("杭州市滨江区", 15);
       this.searchControlOffset=new BMap.Size(20, 20)
       this.listControlOffset=new BMap.Size(20, 40)
       // 添加鼠标滚动缩放
       map.enableScrollWheelZoom();
+      //临时写的
+      this.queryStudentRoute()
+      
     },
     queryStudentRoute(){
+      let that=this
       this.loading = true;
-
-      const query = { active_rfid: this.activeRfid,time_range:this.timeRange,route_type:this.route_type,filter_track:this.filterTrack,}
-      this.$http.get('map/queryStudentRouteGps',{ params: query,timeout:60000}).then(res=>{
-          this.map.clearOverlays()
-          let data=[]
-          let trackLength=res.data.length
-          if(trackLength>0){
-            for (var i = 0; i < trackLength; i++){
-                let item=res.data[i]
-                // var myGeo = new BMap.Geocoder();      
-                // // 根据坐标得到地址描述    
-                // myGeo.getLocation(new BMap.Point(item.Longitude,item.Latitude), function(result){          
-                //       item['Address']=result.address
-                // });
-                // data.push(item)
-                item['index']=i
-                data[i]=item
-            }
-            this.DrawMapLine(data)
-          }
-          this.Routedata=data
+      setTimeout(function(){ 
+        that.DrawMapLine(that.Routedata);
+       that.loading = false;
+      }, 2000);
+      
+      // const query = { active_rfid: this.activeRfid,time_range:this.timeRange,route_type:this.route_type,filter_track:this.filterTrack,}
+      // this.$http.get('map/queryStudentRouteGps',{ params: query,timeout:60000}).then(res=>{
+      //     this.map.clearOverlays()
+      //     let data=[]
+      //     let trackLength=res.data.length
+      //     if(trackLength>0){
+      //       for (var i = 0; i < trackLength; i++){
+      //           let item=res.data[i]
+      //           // var myGeo = new BMap.Geocoder();      
+      //           // // 根据坐标得到地址描述    
+      //           // myGeo.getLocation(new BMap.Point(item.Longitude,item.Latitude), function(result){          
+      //           //       item['Address']=result.address
+      //           // });
+      //           // data.push(item)
+      //           item['index']=i
+      //           data[i]=item
+      //       }
+      //       this.DrawMapLine(data)
+      //     }
+      //     this.Routedata=data
            
-          this.loading = false;
+      //     this.loading = false;
           
-      })
-      .catch(e => {
-        this.loading = false;
-      });
+      // })
+      // .catch(e => {
+      //   this.loading = false;
+      // });
     },
     DrawMapLine(data){
         var pointType = "node";//点类型
         var pointLogLat = new BMap.Point(data[0].Longitude, data[0].Latitude);//终点
         var trackCount=data.length
        // this.center=pointLogLat
-        // this.map.centerAndZoom(pointLogLat, 19);
+        this.map.centerAndZoom(pointLogLat, 19);
         var onLineCoordinates = [];
         for (var i = trackCount-1; i >= 0; i--)
         {
             //线上的点
             pointLogLat = new BMap.Point(data[i].Longitude, data[i].Latitude);
             onLineCoordinates.push(pointLogLat);
-            //描点
-            if (i == 0)
-                pointType = "terminus";
-            else if (i==(trackCount - 1))
-                pointType = "origin";
-            else if (data[i].AlarmType >0 )
-                pointType = "alarm";
-            else if (data[i].SignalType=="GPS")
-                pointType = "node_gps";
-            else
-                pointType = "node_wifi";
-           
-                var pointMarker = this.CreatePointMarkers(data[i], pointType);
 
-                this.trackMarkers.push(pointMarker);
+            var pointMarker = this.CreatePointMarkers(data[i]);
+
+            this.trackMarkers.push(pointMarker);
             
         }
         var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
@@ -287,67 +272,58 @@ export default {
         });
         var icons = new BMap.IconSequence(sy, '10', '30');
         //画线
-        var polyline = new BMap.Polyline(onLineCoordinates,{
-          enableEditing: false,//是否启用线编辑，默认为false
-          enableClicking: true,//是否响应点击事件，默认为true
-          icons:[icons],
-          strokeWeight:'4',//折线的宽度，以像素为单位
-          strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
-          strokeColor:"blue" //折线颜色
-        });
-        this.map.addOverlay(polyline);
+        // var polyline = new BMap.Polyline(onLineCoordinates,{
+        //   enableEditing: false,//是否启用线编辑，默认为false
+        //   enableClicking: true,//是否响应点击事件，默认为true
+        //   icons:[icons],
+        //   strokeWeight:'4',//折线的宽度，以像素为单位
+        //   strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
+        //   strokeColor:"blue" //折线颜色
+        // });
+        // this.map.addOverlay(polyline);
         //最佳视野
         this.map.setViewport(onLineCoordinates);
     },
-    CreatePointMarkers(pointInfo, pType)
+    CreatePointMarkers(pointInfo)
     {
         // console.log(pType)
         var _this=this
         var trackMarker;
         var trackPoint = new BMap.Point(pointInfo.Longitude, pointInfo.Latitude);
 
-        if(pType=='node_wifi' || pType=='node_gps'){
-          var pointIcon = new BMap.Icon(this.markerIcons[pType], new BMap.Size(20, 20))
-          pointIcon.setImageSize(new BMap.Size(20, 20));
 
-        }else{
-          var pointIcon = new BMap.Icon(this.markerIcons[pType], new BMap.Size(27, 32));
-        }
+          var pointIcon = new BMap.Icon(this.markerIcons, new BMap.Size(32, 32));
+
+        pointIcon.setImageSize(new BMap.Size(32, 32));
         // var pointIcon = new BMap.Icon(this.markerIcons[pType], new BMap.Size(27, 32));
             //描点，创建标注 
         pointIcon.iconAnchor = new BMap.Point(5, 5);
         pointIcon.shadow = "";
         trackMarker = new BMap.Marker(trackPoint, { icon: pointIcon });
 
-        if(pType=='node_wifi' || pType=='node_gps'){
-          // trackMarker.setOffset(new BMap.Size(-1, -5));//大图标，偏移确定图片在点正上方
-        }else{
-          trackMarker.setOffset(new BMap.Size(-1, -15));//大图标，偏移确定图片在点正上方
-        }
-        
         
         trackMarker.addEventListener("click", function ()
         {
-            if(pointInfo.SignalType=='WiFi'){
-              var content ='<p>经过时间：' + pointInfo.PassTime + '</p><p>地址：' + pointInfo.WifiAddress + '</p><p>定位类型：' + pointInfo.SignalType + '</p>'
+            // if(pointInfo.SignalType=='WiFi'){
+              var content ='<p>经过时间：' + pointInfo.PassTime + '</p><p>地址：' + pointInfo.WifiAddress + '</p>'
               var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象  
               _this.map.centerAndZoom(trackPoint, 19);
               _this.map.openInfoWindow(infoWindow,trackPoint);
-            }else{
-              var myGeo = new BMap.Geocoder();      
-                // 根据坐标得到地址描述    
-              myGeo.getLocation(new BMap.Point(pointInfo.Longitude,pointInfo.Latitude), function(result){     
-                          let index=pointInfo['index']     
-                          pointInfo['Address']=result.address
-                          _this.Routedata[index]=pointInfo
-                          var trackPoint = new BMap.Point(pointInfo.Longitude, pointInfo.Latitude);
-                          var content ='<p>经过时间：' + pointInfo.PassTime + '</p><p>地址：' + pointInfo.Address + '</p><p>定位类型：' + pointInfo.SignalType + '</p>'
-                          var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象  
-                          _this.map.centerAndZoom(trackPoint, 19);
-                          _this.map.openInfoWindow(infoWindow,trackPoint);
-              });
-              // var content ='<p>经过时间：' + pointInfo.PassTime + '</p><p>地址：' + pointInfo.Address + '</p><p>定位类型：' + pointInfo.SignalType + '</p>'
-            }
+            // }else{
+            //   var myGeo = new BMap.Geocoder();      
+            //     // 根据坐标得到地址描述    
+            //   myGeo.getLocation(new BMap.Point(pointInfo.Longitude,pointInfo.Latitude), function(result){     
+            //               let index=pointInfo['index']     
+            //               pointInfo['Address']=result.address
+            //               _this.Routedata[index]=pointInfo
+            //               var trackPoint = new BMap.Point(pointInfo.Longitude, pointInfo.Latitude);
+            //               var content ='<p>经过时间：' + pointInfo.PassTime + '</p><p>地址：' + pointInfo.Address + '</p>'
+            //               var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象  
+            //               _this.map.centerAndZoom(trackPoint, 19);
+            //               _this.map.openInfoWindow(infoWindow,trackPoint);
+            //   });
+            //   // var content ='<p>经过时间：' + pointInfo.PassTime + '</p><p>地址：' + pointInfo.Address + '</p><p>定位类型：' + pointInfo.SignalType + '</p>'
+            // }
             
            
         });
@@ -360,29 +336,29 @@ export default {
         let that=this
         let index=row['index']
         let item=row
-        if(row['WifiAddress']){
-            item['Address']=row['WifiAddress']
+        // if(row['WifiAddress']){
+            item['Address']=row['Address']
             that.Routedata[index]=item
             var trackPoint = new BMap.Point(row['Longitude'], row['Latitude']);
-            var content ='<p>经过时间：' + item.PassTime + '</p><p>地址：' + item.Address + '</p><p>定位类型：' + item.SignalType + '</p>'
+            var content ='<p>经过时间：' + item.PassTime + '</p><p>地址：' + item.Address + '</p>'
             var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象  
             that.map.centerAndZoom(trackPoint, 19);
             // that.map.panTo(trackPoint)
             that.map.openInfoWindow(infoWindow,trackPoint);
-        }else{
-            var myGeo = new BMap.Geocoder();      
-                // 根据坐标得到地址描述    
-            myGeo.getLocation(new BMap.Point(item.Longitude,item.Latitude), function(result){          
-                        item['Address']=result.address
-                        that.Routedata[index]=item
-                        var trackPoint = new BMap.Point(item.Longitude, item.Latitude);
-                        var content ='<p>经过时间：' + item.PassTime + '</p><p>地址：' + item.Address + '</p><p>定位类型：' + item.SignalType + '</p>'
-                        var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象  
-                        that.map.centerAndZoom(trackPoint, 19);
-                        // that.map.panTo(trackPoint)
-                        that.map.openInfoWindow(infoWindow,trackPoint);
-            });
-        }
+        // }else{
+        //     var myGeo = new BMap.Geocoder();      
+        //         // 根据坐标得到地址描述    
+        //     myGeo.getLocation(new BMap.Point(item.Longitude,item.Latitude), function(result){          
+        //                 item['Address']=result.address
+        //                 that.Routedata[index]=item
+        //                 var trackPoint = new BMap.Point(item.Longitude, item.Latitude);
+        //                 var content ='<p>经过时间：' + item.PassTime + '</p><p>地址：' + item.Address + '</p>'
+        //                 var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象  
+        //                 that.map.centerAndZoom(trackPoint, 19);
+        //                 // that.map.panTo(trackPoint)
+        //                 that.map.openInfoWindow(infoWindow,trackPoint);
+        //     });
+        // }
 
     },
     handleCurrentChange(val) {