Merge remote-tracking branch 'origin/visu_forest_0_1' into visu_forest_0_1

src/api/monitor.js

@@ -29,3 +29,11 @@ export function getRegionalFlag(id) {
     method: 'get',
   })
 }
+// 查询部门经纬度在摄像头半径范围内的摄像头列表
+export function findCameraByDept(deptId) {
+  return request({
+    url: '/center-fire/VisuForestEventCenterController/findCameraByDept',
+    method: 'post',
+    data: {deptId:deptId,type:'1'}
+  })
+}

src/views/bigdata/tabbar.vue

@@ -132,12 +132,15 @@
     },
 
     methods: {
-
       zhxx() {
         let that = this
         getZhxx().then(resp => {
-          console.log("hhh",resp)
-          that.regionNum = resp.data.data
+          that.regionNum = [];
+          that.regionNum.push(...resp.data.event)
+          that.regionNum.push(...resp.data.data)
+          for(let i in resp.data.device){
+            that.regionNum.push({value: resp.data.device[i].deviceCount,name: resp.data.device[i].deviceName})
+          }
         })
       },
 

src/views/monitor.vue

@@ -58,9 +58,35 @@
                 </el-collapse>
               </div>
 
-              <!-- 横向柱状 echart -->
-              <div class="overflow-y" style="height: 33vh;">
-                <div id="camera-chart" style="width: 100%;height:33vh;"></div>
+              <!--&lt;!&ndash; 横向柱状 echart &ndash;&gt;-->
+              <!--<div class="overflow-y" style="height: 33vh;">-->
+                <!--<div id="camera-chart" style="width: 100%;height:33vh;"></div>-->
+              <!--</div>-->
+              <div  class="overflow-y" style="height: 33vh;">
+                  <div class="i-list-con h-43">
+                    <div class="head-container">
+                      <el-input
+                        v-model="deptName"
+                        placeholder="请输入部门名称"
+                        clearable
+                        size="small"
+                        prefix-icon="el-icon-search"
+                        style="margin-bottom: 20px"
+                      />
+                    </div>
+                    <div class="head-container tree-scrollbar" style="height: 700px;overflow-y:auto;">
+                      <el-tree
+                        :data="deptOptions"
+                        :props="defaultProps"
+                        :expand-on-click-node="false"
+                        :filter-node-method="filterNode"
+                        ref="tree"
+                        node-key="id"
+                        :default-expanded-keys="[100]"
+                        @node-click="handleNodeClick"
+                      />
+                    </div>
+                  </div>
               </div>
             </div>
           </dv-border-box-13>
@@ -110,7 +136,6 @@
         </div>
       </div>
       <vBottomMenu ref="bottomMenu"></vBottomMenu>
-<!--      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">-->
 <!--        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img-->
 <!--          src="@/assets/images/mascot.png"/></div>-->
 <!--      </el-tooltip>-->
@@ -133,9 +158,10 @@ import {
   selectDeviceType,
   selectCameraByDeptId,
   selectKeyAreaList,
-  getRegionalFlag
+  getRegionalFlag,
+  findCameraByDept
 } from '@/api/monitor'
-
+import { treeselect } from '@/api/system/dept'
 import supermap from '@/components/supermap' //超图
 import vheader from '@/components/v-header.vue' //一体化共用头部
 import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
@@ -163,6 +189,12 @@ export default {
     eventLocation,
     TVWall
   },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
   created() {
     /** ----------------------------------摄像头预览开始------------------------------------- */
     const DHWsInstance = DHWs.getInstance()
@@ -180,6 +212,7 @@ export default {
     this.selectDeviceType(-1)
     this.selectKeyAreaList()
     this.bottomMenuList() //获取底部公共组件消息和任务
+    this.getTreeselect()
   },
   data() {
     return {
@@ -219,9 +252,124 @@ export default {
       indentText: '收起左右栏',
       indentdisabled: false,
       domId: 'dom1',
+
+
+
+      // 部门名称
+      deptName: undefined,
+      // 部门树选项
+      deptOptions: undefined,
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
     }
   },
   methods: {
+    /** 部门树*/
+    // 查询部门下拉树结构
+    getTreeselect() {
+      treeselect().then(response => {
+        console.log(response.data)
+        this.deptOptions = response.data
+      })
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.findCameraByDept(data.id)
+    },
+    findCameraByDept(deptId) {
+      findCameraByDept(deptId).then(res => {
+        let that = this;
+        //根据设备类型查看列表
+        this.cameraMarkersList = [];
+        that.visuForestCloudCameraBOList = res.data
+        if (res.data != null && res.data.length > 0) {
+          this.cameraMarkersList.push({
+            lng: res.data[0].deptLongitude,
+            lat: res.data[0].deptLatitude,
+            icon: 'marker',
+            bindPopupHtml: '',
+            click: '',
+            keepBindPopup: false,
+            isAggregation: true,
+            radius:0
+          })
+          for (let i = 0; i < res.data.length; i++) {
+            let markersMap = {
+              lng: 124.59,
+              lat: 43.02,
+              icon: 'camera',
+              bindPopupHtml: '',
+              click: 'preview',
+              parameter: '',
+              keepBindPopup: false,
+              isAggregation: false
+            }
+            if (res.data[i].channelCode != null) {
+              markersMap.parameter = {code:res.data[i].cameraCode,
+                type:res.data[i].cameraFactory}
+            } else {
+              markersMap.parameter = []
+            }
+
+            markersMap.lng = res.data[i].longitude
+            markersMap.lat = res.data[i].latitude
+            markersMap.radius = res.data[i].cameraRadius
+            markersMap.bindPopupHtml = '<div class="map-tip">' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>经纬度：' + res.data[i].longitude + ',' + res.data[i].latitude +
+              '</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>摄像头名称：' + res.data[i].cameraName + '</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>摄像头类型：' + (res.data[i].cameraFactory=="1"?"大华":"海康") + '</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>摄像头半径：' + res.data[i].cameraRadius + '米</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>' +
+              '</div>'
+            this.cameraMarkersList.push(markersMap)
+          }
+          setTimeout(() => {
+            that.$refs.supermap.clearM(true)
+            that.$refs.supermap.clearM(false)
+            that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
+          }, 1000)
+        }else{
+          setTimeout(() => {
+            that.$refs.supermap.clearM(false)
+            that.$refs.supermap.clearM(false)
+            that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
+          }, 1000)
+        }
+      })
+    },
+    /** 部门树*/
+
     selectKeyAreaList() {
       this.keyAreaList=[]
       //获取重点区域列表
@@ -324,112 +472,112 @@ export default {
       this.$refs.supermap.layerSwitchingList_Data(urlList)
     },
     /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-    cameraChat() {
-      // 基于准备好的dom，初始化echarts实例
-      let myChart = echarts.init(document.getElementById('camera-chart'))
-      // 绘制图表
-      const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848']
-      myChart.setOption({
-        dataset: {
-          source: this.sourceData
-        },
-        tooltip: {
-          trigger: 'item'
-
-        },
-        grid: {
-          top: '5%',
-          left: '5%',
-          // right: "4%",
-          bottom: '0%',
-          width: '75%',
-          containLabel: true
-        },
-        dataZoom: [{
-          show:true,
-          type: 'slider',
-          yAxisIndex:0,
-          left:10,
-          start: 0,
-          end: this.sourceData.length > 10 ? 40 : 100,
-          width:15
-        }],
-        xAxis: {
-          show: false,
-          type: 'value',
-          left:10
-        },
-        yAxis: {
-          type: 'category', // 不设置类目轴，抽离的dataset数据展示不出来
-          inverse: true,
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: '#5deaff',
-              fontSize: '12'
-            }
-          },
-          splitLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            show: false
-          }
-        },
-
-        series: [{
-
-          type: 'bar',
-          animationCurve: 'easeOutBack',
-          barWidth: 5,
-          label: {
-            show: true,
-            position: 'right',
-            offset: [0, 0],
-            color: '#88dfd5',
-            // fontSize: "12",
-            style: {
-              fill: '#fff'
-            }
-          },
-          backgroundBar: {
-            show: true,
-            style: {
-              fill: 'rgba(97,152,255,0.20)'
-            }
-          },
-          barStyle: {
-            stroke: 'rgba(41,244,236,1)'
-          },
-          gradient: {
-            color: ['rgba(41,244,236,1)', 'rgba(41,244,236,0)']
-          },
-          itemStyle: {
-            label: {
-              show: true
-            },
-            labelLine: {
-              show: false
-            },
-            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-              offset: 0,
-              color: 'rgba(41,244,236,0)'
-            },
-              {
-                offset: 1,
-                color: 'rgba(41,244,236,.5)'
-              }
-            ]),
-            borderColor: '#a2f9f7',
-            shadowBlur: 16,
-            shadowColor: '#a2f9f7'
-          }
-        }]
-      })
-    },
+    // cameraChat() {
+    //   // 基于准备好的dom，初始化echarts实例
+    //   let myChart = echarts.init(document.getElementById('camera-chart'))
+    //   // 绘制图表
+    //   const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848']
+    //   myChart.setOption({
+    //     dataset: {
+    //       source: this.sourceData
+    //     },
+    //     tooltip: {
+    //       trigger: 'item'
+    //
+    //     },
+    //     grid: {
+    //       top: '5%',
+    //       left: '5%',
+    //       // right: "4%",
+    //       bottom: '0%',
+    //       width: '75%',
+    //       containLabel: true
+    //     },
+    //     dataZoom: [{
+    //       show:true,
+    //       type: 'slider',
+    //       yAxisIndex:0,
+    //       left:10,
+    //       start: 0,
+    //       end: this.sourceData.length > 10 ? 40 : 100,
+    //       width:15
+    //     }],
+    //     xAxis: {
+    //       show: false,
+    //       type: 'value',
+    //       left:10
+    //     },
+    //     yAxis: {
+    //       type: 'category', // 不设置类目轴，抽离的dataset数据展示不出来
+    //       inverse: true,
+    //       axisLabel: {
+    //         show: true,
+    //         textStyle: {
+    //           color: '#5deaff',
+    //           fontSize: '12'
+    //         }
+    //       },
+    //       splitLine: {
+    //         show: false
+    //       },
+    //       axisTick: {
+    //         show: false
+    //       },
+    //       axisLine: {
+    //         show: false
+    //       }
+    //     },
+    //
+    //     series: [{
+    //
+    //       type: 'bar',
+    //       animationCurve: 'easeOutBack',
+    //       barWidth: 5,
+    //       label: {
+    //         show: true,
+    //         position: 'right',
+    //         offset: [0, 0],
+    //         color: '#88dfd5',
+    //         // fontSize: "12",
+    //         style: {
+    //           fill: '#fff'
+    //         }
+    //       },
+    //       backgroundBar: {
+    //         show: true,
+    //         style: {
+    //           fill: 'rgba(97,152,255,0.20)'
+    //         }
+    //       },
+    //       barStyle: {
+    //         stroke: 'rgba(41,244,236,1)'
+    //       },
+    //       gradient: {
+    //         color: ['rgba(41,244,236,1)', 'rgba(41,244,236,0)']
+    //       },
+    //       itemStyle: {
+    //         label: {
+    //           show: true
+    //         },
+    //         labelLine: {
+    //           show: false
+    //         },
+    //         color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+    //           offset: 0,
+    //           color: 'rgba(41,244,236,0)'
+    //         },
+    //           {
+    //             offset: 1,
+    //             color: 'rgba(41,244,236,.5)'
+    //           }
+    //         ]),
+    //         borderColor: '#a2f9f7',
+    //         shadowBlur: 16,
+    //         shadowColor: '#a2f9f7'
+    //       }
+    //     }]
+    //   })
+    // },
     selectDeviceType(index) {
       this.iconCurrentIndex1 = index
       //获取左侧动态感知设备
@@ -451,7 +599,7 @@ export default {
         }
 
         that.visuForestCloudCameraBOList = res.data.visuForestCloudCameraBOList
-        this.cameraChat()
+        // this.cameraChat()
         if (res.data.visuForestCloudCameraBOList != null && res.data.visuForestCloudCameraBOList
           .length > 0) {
           for (let i = 0; i < res.data.visuForestCloudCameraBOList.length; i++) {
@@ -559,8 +707,8 @@ export default {
               isAggregation: false
             }
             if (res.data[i].channelCode != null) {
-              markersMap.parameter = {code:res.data.data[i].cameraCode,
-                type:res.data.data[i].cameraFactory}
+              markersMap.parameter = {code:res.data[i].cameraCode,
+                type:res.data[i].cameraFactory}
             } else {
               markersMap.parameter = []
             }