监控中心替换组织机构树

src/views/monitor.vue

@@ -41,26 +41,52 @@
                   </div>
                 </div>
               </div>
-              <div class="overflow-y" style="height: 33vh;">
-                <el-collapse accordion>
-                  <el-collapse-item v-for="(item,index) in region" :key="index">
-                    <!-- deptId -->
-                    <template slot="title">
-                      <div class="d-l-con sj-collapse" :class="{on:listCurrentIndex1==item.deptId}"
-                           v-on:click="selectCameraByDeptId(item.deptId)">
-                        <div class="d-l-l-text">
-                          <h4 class="collapse-title">{{ item.deptName }}</h4>
-                        </div>
-                        <div class="d-l-l-count">{{ item.deptCount }}</div>
-                      </div>
-                    </template>
-                  </el-collapse-item>
-                </el-collapse>
-              </div>
+<!--              <div class="overflow-y" style="height: 33vh;">-->
+<!--                <el-collapse accordion>-->
+<!--                  <el-collapse-item v-for="(item,index) in region" :key="index">-->
+<!--                    &lt;!&ndash; deptId &ndash;&gt;-->
+<!--                    <template slot="title">-->
+<!--                      <div class="d-l-con sj-collapse" :class="{on:listCurrentIndex1==item.deptId}"-->
+<!--                           v-on:click="selectCameraByDeptId(item.deptId)">-->
+<!--                        <div class="d-l-l-text">-->
+<!--                          <h4 class="collapse-title">{{ item.deptName }}</h4>-->
+<!--                        </div>-->
+<!--                        <div class="d-l-l-count">{{ item.deptCount }}</div>-->
+<!--                      </div>-->
+<!--                    </template>-->
+<!--                  </el-collapse-item>-->
+<!--                </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: 70vh;">
+                <div class="i-list-con h-65">
+                  <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>
@@ -135,7 +161,7 @@ import {
   selectKeyAreaList,
   getRegionalFlag
 } 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' //一体化公共底部菜单
@@ -179,9 +205,18 @@ export default {
     this.selectDeviceType(-1)
     this.selectKeyAreaList()
     this.bottomMenuList() //获取底部公共组件消息和任务
+    this.getTreeselect()
   },
   data() {
     return {
+      // 部门名称
+      deptName: undefined,
+// 部门树选项
+      deptOptions: undefined,
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
       iconCurrentIndex1: '-1',
       listCurrentIndex1: '-1',
       listCurrentIndex2: '-1',
@@ -220,7 +255,31 @@ export default {
       domId: 'dom1',
     }
   },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
   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)
+      this.selectCameraByDeptId(data.id);
+    },
     selectKeyAreaList() {
       this.keyAreaList=[]
       //获取重点区域列表
@@ -319,112 +378,6 @@ export default {
       this.$refs.supermap.layerSwitchingList(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'
-          }
-        }]
-      })
-    },
     selectDeviceType(index) {
       this.iconCurrentIndex1 = index
       //获取左侧动态感知设备
@@ -446,7 +399,6 @@ export default {
         }
 
         that.visuForestCloudCameraBOList = res.data.visuForestCloudCameraBOList
-        this.cameraChat()
         if (res.data.visuForestCloudCameraBOList != null && res.data.visuForestCloudCameraBOList
           .length > 0) {
           for (let i = 0; i < res.data.visuForestCloudCameraBOList.length; i++) {
@@ -554,8 +506,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 = []
             }