From 534ae25efc2eec674d996ac0a17ce0458ef08a6e Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Tue, 13 Aug 2024 18:43:09 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=BD=E5=B7=A5=E7=AE=A1=E6=8E=A7=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=8F=8A=E6=8E=A5=E5=8F=A3=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/construction/manage/personManage.js   |   18 +
 .../manage/personManage/personManage.vue      | 1148 +++++++++--------
 2 files changed, 603 insertions(+), 563 deletions(-)
 create mode 100644 src/api/construction/manage/personManage.js

diff --git a/src/api/construction/manage/personManage.js b/src/api/construction/manage/personManage.js
new file mode 100644
index 0000000..c7713eb
--- /dev/null
+++ b/src/api/construction/manage/personManage.js
@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+/* 人员树 */
+export function personsTree(query) {
+    return request({
+        url: '/bracelet/consControl/getPersonsTree',
+        method: 'get',
+        params: query
+    })
+}
+
+/* 根据杆塔获取班组人员/临时人员-已绑定手环 */
+export function teamPersonByTower(query) {
+    return request({
+        url: '/bracelet/consControl/getTeamPersonByTower',
+        method: 'get',
+        params: query
+    })
+}
\ No newline at end of file
diff --git a/src/views/construction/manage/personManage/personManage.vue b/src/views/construction/manage/personManage/personManage.vue
index 0c5a624..0bece9b 100644
--- a/src/views/construction/manage/personManage/personManage.vue
+++ b/src/views/construction/manage/personManage/personManage.vue
@@ -1,586 +1,608 @@
 <template>
-    <div class="personManage" style="width: 100%;height: 80vh;background-color: #ffffff;box-shadow: 10px 10px 5px #000000;float: left;">
-      <div class="left">
-        <div class="title">
-          <el-input v-model="keyword" placeholder="请输入关键词" style="width: 90%;">
-            <template #prepend>
-              <el-button class="el-icon-search" @click="searchClick"/>
-            </template>
-          </el-input>
-        </div>
-        <div class="content">
-          <el-tree :data="treeData"  icon="el-icon-search" node-key="id" :default-expanded-keys="[1]"
-            @node-click="handleNodeClick" :render-content="renderContent" style="font-size: 14px;"/>
-        </div>
+  <div class="personManage"
+    style="width: 100%;height: 80vh;background-color: #ffffff;box-shadow: 10px 10px 5px #000000;float: left;">
+    <div class="left">
+      <div class="title">
+        <el-input placeholder="请输入关键字" v-model="filterText" maxlength="30">
+        </el-input>
       </div>
-      <div class="center">
-        <div class="title">
-          <el-button type="primary" link icon="el-icon-search" @click="dialogVisible1 = true">手环人脸验证抽检</el-button>
-          <el-button type="primary" link icon="el-icon-setting" @click="dialogVisible2 = true">自动验证配置</el-button>
-        </div>
-        <div class="content">
-          <baidu-map map-style-v2="light" class="map" :zoom="zoom" :center="center" @ready="handler">
-            <bm-marker v-for="(item, index) in deviceData" :position="item.position" :dragging="true" 
-              :icon="{url: mapIcon1, size: { width: 24, height: 24 }}" animation="" 
-              @click="infoWindowOpen(item)" @mouseover="infoWindowOpen(item)" @mouseout="infoWindowClose(item)">
-              <!-- <bm-label v-if="item.deviceName != ''" :content="item.deviceName" :labelStyle="{color:'red', fontSize: '14px'}" :offset="{width:-20, height:10}"></bm-label> -->
-              <bm-info-window :show="item.show">
-                {{ item.deviceName }}
-              </bm-info-window>
-            </bm-marker>
-
-            <bm-circle :center="circleRange.center" @click="infoWindowClose" :radius="circleRange.radius" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" @lineupdate="updateCirclePath" :editing="true"></bm-circle>
-          
-          </baidu-map>
-        </div>
+      <div class="content tree">
+        <el-tree :data="treeData" icon="el-icon-search" node-key="id" :default-expanded-keys="idArr"
+          @node-click="handleNodeClick" :render-content="renderContent" style="font-size: 15px;letter-spacing: 1px;"
+          ref="tree" :filter-node-method="filterNode" :highlight-current="true" />
       </div>
-      <div class="right">
-        <div class="title" style="float: left;text-indent: 10px;">
-          <div style="color: #3E5469;font-size: 12px;margin-top: 4%;"> 
-            今日施工班组{{ buildData.teamNum }}个
-          </div>
-          <div style="color: #3E5469;font-size: 12px;margin-top: 2%;">
-            今日施工人数{{ buildData.personNum }}人
-          </div>
-        </div>
-        <div class="content">
-          <div class="title" style="color: #3E5469;font-size: 1px;font-weight: 600;text-indent: 10px;">
-            智能安全帽
-          </div>
-          <div class="table" style="margin-top: 2%;">
-            <el-table :data="tableData" style="width: 100%" :show-header="false">
-              <el-table-column prop="username" label="人员姓名"/>
-              <el-table-column prop="deviceName" label="设备名称"/>
-              <el-table-column prop="warnContent" label="操作">
-                <template #default="scope">
-                    <!-- <div>{{ scope.row.username }}</div> -->
-                    <img src="../../../../assets/images/mike.png" style="width: 20px;height: 20px;cursor: pointer;">
-                    <img src="../../../../assets/images/camera.png" style="width: 20px;height: 20px;cursor: pointer;">
-                </template>
-              </el-table-column>
-            </el-table>
-          </div>
-        </div>
-      </div>
-        
-
-      <el-dialog
-        title="选择"
-        :visible.sync="dialogVisible1" 
-        :append-to-body="true"
-        :draggable="true"
-        :destroy-on-close="true"
-        width="20%" top="50vh">
-          <div style="height: 60vh;overflow: auto;">
-            <div class="title" style="margin-bottom: 4%;">
-              <el-input v-model="keyword2" placeholder="请输入关键词" style="width: 90%;">
-                <template #prepend>
-                  <el-button class="el-icon-search" @click="searchClick2"/>
-                </template>
-              </el-input>
-            </div>
-            <el-tree :data="teamTreeData" icon="el-icon-search" show-checkbox
-                @node-click="teamTreeNodeClick" style="font-size: 14px;" @check-change="teamTreeCheckChange" 
-                ref="teamTree"/>
-          </div>
-          <template #footer>
-            <span class="dialog-footer">
-              <el-button @click="spotCheckDialogClose">取消</el-button>
-              <el-button type="primary" @click="startSpotCheck">发起抽检</el-button>
-            </span>
-          </template>
-      </el-dialog>
-
-
-      <el-dialog
-        title="自动验证人脸配置"
-        :visible.sync="dialogVisible2" 
-        :append-to-body="true"
-        :draggable="true"
-        :destroy-on-close="true"
-        width="20%" custom-class="my-dialog">
-          <div style="width: 100%;height: 30vh;">
-            <div>模式选择</div>
-            <el-radio-group v-model="provingTypeRadioValue" class="ml-4" @change="provingTypeRadioChange" style="margin-top: 10px;">
-              <el-radio label="1" size="large">固定时间验证</el-radio>
-              <el-radio label="2" size="large">间隔时间验证</el-radio>
-            </el-radio-group>
-
-            <div v-if="provingTypeRadioValue == '1'">
-              <div @click="addTimeInput" style="color: #1890FF;margin-top: 20px;margin-bottom: 10px;cursor: pointer;">+ 添加时间</div>
-              <div style="overflow: auto;width: 100%;height: 22vh;">
-                <div
-                  v-for="(item, index) in provingTimeValue">
-                  <el-time-picker
-                    v-model="provingTimeValue[index]"
-                    format="HH:mm:ss"
-                    placeholder="选择时间"
-                    value-format="HH-mm-ss"
-                    style="margin-bottom: 10px;">
-                  </el-time-picker>
-                  <el-button v-if="index != 0" class="el-icon-delete" @click="delTimeInput(index)"/>
-                </div>
-              </div>
-            </div>
-            <div v-if="provingTypeRadioValue == '2'">
-              <div style="margin-top: 10%;margin-left: 30px;">
-                每隔&nbsp;<el-input v-model="intervalTime" type="number" min="1" style="width: 100px;"/>&nbsp;小时自动验证人脸
-              </div>
-            </div>
-          </div>
-          <template #footer>
-            <span class="dialog-footer">
-              <el-button @click="provingDialogClose">取消</el-button>
-              <el-button type="primary" @click="provingDialogConfirm">确定</el-button>
-            </span>
-          </template>
-      </el-dialog>
     </div>
-    
-  </template>
-  
-  <script>
-  export default {
-    name: 'personManage',
-    data() {
-      return {
-        //树的配置
-        defaultProp: {
-          children: 'children',
-          label: 'label',
-          disabled: 'disabled',
-        },
+    <div class="center">
+      <div class="title">
+        <el-button type="primary" plain icon="el-icon-search" @click="facialSampling">手环人脸验证抽检</el-button>
+        <el-button type="primary" plain icon="el-icon-setting" @click="dialogVisible2 = true">自动验证配置</el-button>
+      </div>
+      <div class="content">
+        <baidu-map map-style-v2="light" class="map" :zoom="zoom" :center="center" @ready="handler">
+          <bm-marker v-for="(item, index) in deviceData" :position="item.position" :dragging="true"
+            :icon="{ url: mapIcon1, size: { width: 24, height: 24 } }" animation="" @click="infoWindowOpen(item)"
+            @mouseover="infoWindowOpen(item)" @mouseout="infoWindowClose(item)">
+            <!-- <bm-label v-if="item.deviceName != ''" :content="item.deviceName" :labelStyle="{color:'red', fontSize: '14px'}" :offset="{width:-20, height:10}"></bm-label> -->
+            <bm-info-window :show="item.show">
+              {{ item.deviceName }}
+            </bm-info-window>
+          </bm-marker>
 
-        //记录设备位置数据
-        deviceData: [
-          {"position": {lng: 116.404, lat: 39.915}, "deviceName": "设备11",show: false,},
-          {"position": {lng: 116.405, lat: 39.915}, "deviceName": "设备22",show: false,},
-          {"position": {lng: 116.404, lat: 39.916}, "deviceName": "设备33",show: false,},
-          {"position": {lng: 116.404, lat: 39.917}, "deviceName": "设备44",show: false,},
-        ],
-        //范围数据记录
-        circleRange: {
-          //中心点
-          center: {
-            lng: 116.404,
-            lat: 39.915
-          },
-          //半径 米
-          radius: 500
-        },
-        //记录信息窗口数据
-        infoWindow: {
-          //窗体是否展示
-          show: false,
-        },
-        //记录坐标点的图表样式1
-        mapIcon1: require("../../../../assets/images/greenDrop.png"),
-        //记录坐标点的图表样式2
-        mapIcon2: require("../../../../assets/images/redDrop.png"),
-        //设置地图中心点
-        center: { lng: 0,  lat: 0 },
-        //设置缩放
-        zoom: 15,
-        //搜索框数据
-        keyword: '',
-        //保存树的数据
-        treeData: [
-          {
-            id: '1',
-            label: '工程xxxxxxx',
-            children: [
-              {
-                label: '#1',
-                children: [
-                  {
-                    label: '张三班组',
-                    children: [
-                      {
-                        label: '张三',
-                      },
-                    ]
-                  },
-                ],
-              },
-            ],
-          },
-          {
-            label: '工程xxxxxxx',
-            children: [
-              {
-                label: '#2',
-                children: [
-                  {
-                    label: '张三班组',
-                    children: [
-                      {
-                        label: '张三',
-                      },
-                    ]
-                  },
-                ],
-              },
-              {
-                label: '工程xxxxxxx',
-                children: [
-                  {
-                    label: '#3',
-                  },
-                ],
-              },
-            ],
-          },
-          {
-            label: '工程xxxxxxx',
-            children: [
-              {
-                label: '#4',
-                children: [
-                  {
-                    label: '张三班组',
-                    children: [
-                      {
-                        label: '张三',
-                      },
-                    ]
-                  },
-                ],
-              },
-              {
-                label: '#5',
-                children: [
-                  {
-                    label: '张三班组',
-                    children: [
-                      {
-                        label: '张三',
-                      },
-                    ]
-                  },
-                ],
-              },
-            ],
-          },
-        ],
+          <bm-circle :center="circleRange.center" @click="infoWindowClose" :radius="circleRange.radius"
+            stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" @lineupdate="updateCirclePath"
+            :editing="true"></bm-circle>
 
-        //保存施工班组数与施工人数
-        buildData: {
-          teamNum: '5',
-          personNum: '30'
-        }
-        //保存表格数据
-        ,tableData: [
-          {
-            username: '张三',
-            deviceName: '1号智能安全帽'
-          },
-          {
-            username: '张xx',
-            deviceName: 'xxxxxxxxxx'
-          },
-          {
-            username: '张xx',
-            deviceName: 'xxxxxxxxxx'
-          },
-          {
-            username: '张xx',
-            deviceName: 'xxxxxxxxxx'
-          },
-          
-        ],
+        </baidu-map>
+      </div>
+    </div>
+    <div class="right">
+      <div class="title" style="float: left;text-indent: 10px;">
+        <div style="color: #3E5469;font-size: 12px;margin-top: 4%;">
+          今日施工班组{{ buildData.teamNum }}个
+        </div>
+        <div style="color: #3E5469;font-size: 12px;margin-top: 2%;">
+          今日施工人数{{ buildData.personNum }}人
+        </div>
+      </div>
+      <div class="content">
+        <div class="title" style="color: #3E5469;font-size: 1px;font-weight: 600;text-indent: 10px;">
+          智能安全帽
+        </div>
+        <div class="table" style="margin-top: 2%;">
+          <el-table :data="tableData" style="width: 100%" :show-header="false">
+            <el-table-column prop="username" label="人员姓名" />
+            <el-table-column prop="deviceName" label="设备名称" />
+            <el-table-column prop="warnContent" label="操作">
+              <template #default="scope">
+                <!-- <div>{{ scope.row.username }}</div> -->
+                <img src="../../../../assets/images/mike.png" style="width: 20px;height: 20px;cursor: pointer;">
+                <img src="../../../../assets/images/camera.png" style="width: 20px;height: 20px;cursor: pointer;">
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
 
-        //保存对话框隐藏展示
-        dialogVisible1: false,
-        dialogVisible2: false,
-        //抽检搜索框数据
-        keyword2: "",
-        //保存抽检树形数据
-        teamTreeData: [
-          {
-            id: '1',
-            label: '在施班组及人员',
-            children: [
-              {
-                label: '张三班组',
-                children: [
-                  {
-                    label: '张三',
-                  },
-                ],
-              },
-              {
-                id: '1-1',
-                label: 'xx班组',
-                children: [
-                  {
-                    label: 'xx1',
-                  },
-                  {
-                    label: 'xx2',
-                  },
-                ],
-              },
-              {
-                id: '1-2',
-                label: 'xx班组',
-                children: [
-                  {
-                    label: 'xx1',
-                  },
-                  {
-                    label: 'xx2',
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-        //间隔时间
-        intervalTime: 1,
 
-        //验证对话框单选按钮
-        provingTypeRadioValue: "1",
-        provingTimeValue: [''],
-      };
+    <el-dialog title="选择抽检范围" :visible.sync="dialogVisible1" :append-to-body="true" width="500px">
+      <el-input placeholder="请输入关键字" v-model="filterText2" maxlength="30" style="margin-bottom: 10px;"></el-input>
+      <div class="tree">
+        <el-tree :data="teamTreeData" icon="el-icon-search" show-checkbox node-key="id" :default-expanded-keys="idArr2"
+          @node-click="teamTreeNodeClick" :filter-node-method="filterNode2" style="letter-spacing: 1px;"
+          @check-change="teamTreeCheckChange" ref="teamTree" />
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible1 = false">取消</el-button>
+          <el-button type="primary" @click="startSpotCheck">发起抽检</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+
+    <el-dialog title="自动验证人脸配置" :visible.sync="dialogVisible2" :append-to-body="true" :draggable="true"
+      :destroy-on-close="true" width="20%" custom-class="my-dialog">
+      <div style="width: 100%;height: 30vh;">
+        <div>模式选择</div>
+        <el-radio-group v-model="provingTypeRadioValue" class="ml-4" @change="provingTypeRadioChange"
+          style="margin-top: 10px;">
+          <el-radio label="1" size="large">固定时间验证</el-radio>
+          <el-radio label="2" size="large">间隔时间验证</el-radio>
+        </el-radio-group>
+
+        <div v-if="provingTypeRadioValue == '1'">
+          <div @click="addTimeInput" style="color: #1890FF;margin-top: 20px;margin-bottom: 10px;cursor: pointer;">+ 添加时间
+          </div>
+          <div style="overflow: auto;width: 100%;height: 22vh;">
+            <div v-for="(item, index) in provingTimeValue">
+              <el-time-picker v-model="provingTimeValue[index]" format="HH:mm:ss" placeholder="选择时间"
+                value-format="HH-mm-ss" style="margin-bottom: 10px;">
+              </el-time-picker>
+              <el-button v-if="index != 0" class="el-icon-delete" @click="delTimeInput(index)" />
+            </div>
+          </div>
+        </div>
+        <div v-if="provingTypeRadioValue == '2'">
+          <div style="margin-top: 10%;margin-left: 30px;">
+            每隔&nbsp;<el-input v-model="intervalTime" type="number" min="1" style="width: 100px;" />&nbsp;小时自动验证人脸
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="provingDialogClose">取消</el-button>
+          <el-button type="primary" @click="provingDialogConfirm">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+
+</template>
+
+<script>
+import { personsTree, teamPersonByTower } from "@/api/construction/manage/personManage.js";
+import { log } from '../../../../utils/video/video-7.19.1.min';
+export default {
+  name: 'personManage',
+  /* 人员树前端筛选 */
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
     },
-    created() {
-    },
-    methods: {
-      handler ({ BMap, map }){
-        console.log(BMap, map);
-        this.center.lng = 116.404;
-        this.center.lat = 39.915;
-        this.zoom = 15;
-
-         // 缩放
-        map.enableScrollWheelZoom(true);
-
-        //设置地图风格
-        let mapStyle = {style: 'midnight'}
-        map.setMapStyle(mapStyle)
-        // map.setMapType(BMAP_PERSPECTIVE_MAP); //修改地图类型为3D地图
-        map.setMapType(BMAP_NORMAL_MAP); //普通地图
-        // map.setMapType(BMAP_HYBRID_MAP); //混合地图
-        // map.setMapType(BMAP_SATELLITE_MAP); //卫星地图
+    filterText2(val) {
+      this.$refs.teamTree.filter(val);
+    }
+  },
+  data() {
+    return {
+      // 人员树过滤
+      filterText: '',
+      // 在施班组及人员过滤
+      filterText2: '',
+      // 选中的杆塔
+      towerId: undefined,
+      // 人员树默认展示的节点
+      idArr: [],
+      // 在施班组及人员默认展示节点
+      idArr2: [],
+      //树的配置
+      defaultProp: {
+        children: 'children',
+        label: 'label',
+        disabled: 'disabled',
       },
 
-      //搜索点击
-      searchClick() {
-        alert(this.keyword)
+      //记录设备位置数据
+      deviceData: [
+        { "position": { lng: 116.404, lat: 39.915 }, "deviceName": "设备11", show: false, },
+        { "position": { lng: 116.405, lat: 39.915 }, "deviceName": "设备22", show: false, },
+        { "position": { lng: 116.404, lat: 39.916 }, "deviceName": "设备33", show: false, },
+        { "position": { lng: 116.404, lat: 39.917 }, "deviceName": "设备44", show: false, },
+      ],
+      //范围数据记录
+      circleRange: {
+        //中心点
+        center: {
+          lng: 116.404,
+          lat: 39.915
+        },
+        //半径 米
+        radius: 500
       },
-      //树组件节点点击
-      handleNodeClick(data){
-        console.log(data.id)
+      //记录信息窗口数据
+      infoWindow: {
+        //窗体是否展示
+        show: false,
       },
-      //给梳妆街头不同层级设置不同的icon
-      renderContent(h, { node, data }) {
-        // 根据层级使用不同的图标
-        let icon;
-        if (node.level === 1) {
-          icon = 'el-icon-coin'; // 第一层使用主页图标
-        } else if (node.level === 2) {
-          icon = 'el-icon-s-unfold'; // 第二层使用展开图标
-        } else {
-          icon = 'el-icon-user'; // 其他层级使用平台图标
-        }
-  
-        return (
-          <span class="custom-tree-node">
-            <i class={icon}></i>
-            <span>{node.label}</span>
-          </span>
-        );
-      },
-      updateCirclePath (e) {
-        this.circleRange.center = e.target.getCenter()
-        this.circleRange.radius = e.target.getRadius()
-      },
-      //展示设备详情
-      showWindow(event){
-        console.log(event.target.getAttribute("class"))
+      //记录坐标点的图表样式1
+      mapIcon1: require("../../../../assets/images/greenDrop.png"),
+      //记录坐标点的图表样式2
+      mapIcon2: require("../../../../assets/images/redDrop.png"),
+      //设置地图中心点
+      center: { lng: 0, lat: 0 },
+      //设置缩放
+      zoom: 15,
+      //搜索框数据
+      keyword: '',
+      //保存树的数据
+      treeData: [],
 
-        // // 使用 event.target 获取触发事件的元素
-        // const triggerElement = event.target;
-        // // 获取元素上的属性值，例如 'data-value' 属性
-        // const attributeValue = triggerElement.getAttribute('position');
-        // console.log(attributeValue);
-      },
-      infoWindowClose(item) {
-        item.show = false;
-      },
-      infoWindowOpen(item) {
-        item.show = true;
-      },
-
-      //抽检弹框搜索
-      searchClick2() {
-        alert(this.keyword2)
-      },
-      //抽检树组件节点点击
-      teamTreeNodeClick(data){
-        console.log(data.id)
-      },
-      //抽检树节点多选框值改变监听
-      teamTreeCheckChange (data,checked,indeterminate) {
-        console.log(data, checked, indeterminate)
-      },
-      //取消
-      spotCheckDialogClose(){
-        //清空搜索框
-        this.keyword2 = "";
-        //关闭对话框
-        this.dialogVisible1 = false
-      },
-
-      //取消
-      spotCheckDialogClose(){
-        //关闭对话框
-        this.dialogVisible2 = false
-      },
-      //发起抽检
-      startSpotCheck(){
-        //获取多选框勾选的值
-        const checkedNodes = this.$refs.teamTree.getCheckedNodes();
-        console.log(checkedNodes);
-
-
-        // this.dialogVisible1 = false
-      },
-
-      //验证人脸配置单选按钮值改变监听
-      provingTypeRadioChange(value){
-        console.log(value)
-      },
-      //添加日期
-      addTimeInput(){
-        this.provingTimeValue.push('')
-      },
-      //删除日期
-      delTimeInput(index){
-        this.provingTimeValue.splice(index, 1);
-      },
-
-
-      //验证对话框关闭
-      provingDialogClose(){
-        this.dialogVisible2 = false;
-      },
-      //验证对话框确认按钮
-      provingDialogConfirm(){
-        // provingTypeRadioValue intervalTime
-        if(this.provingTypeRadioValue == "1"){
-          console.log(this.provingTimeValue)
-        }else{
-          console.log(this.intervalTime)
-        }
-
-        
+      //保存施工班组数与施工人数
+      buildData: {
+        teamNum: '5',
+        personNum: '30'
       }
-    }
-  };
-  </script>
-  
-  <style>
-    .my-dialog{
-      top: 200px
-    }
-    .map {
-      display: inline-block;
-      width: 100%;
-      height: 100%;
-    }
+      //保存表格数据
+      , tableData: [
+        {
+          username: '张三',
+          deviceName: '1号智能安全帽'
+        },
+        {
+          username: '张xx',
+          deviceName: 'xxxxxxxxxx'
+        },
+        {
+          username: '张xx',
+          deviceName: 'xxxxxxxxxx'
+        },
+        {
+          username: '张xx',
+          deviceName: 'xxxxxxxxxx'
+        },
 
-    .personManage .bm-view {
-      width: 100%;
-      height: 100%;
-    }
+      ],
+
+      //保存对话框隐藏展示
+      dialogVisible1: false,
+      dialogVisible2: false,
+      //抽检搜索框数据
+      keyword2: "",
+      //保存抽检树形数据
+      teamTreeData: [],
+      //间隔时间
+      intervalTime: 1,
+
+      //验证对话框单选按钮
+      provingTypeRadioValue: "1",
+      provingTimeValue: [''],
+    };
+  },
+  created() {
+    this.getPersonsTree();
+  },
+  methods: {
+    /* 加载人员树 */
+    getPersonsTree() {
+      personsTree().then(res => {
+        const treeData = res.data;
+        if (treeData && treeData.length > 0) {
+          this.treeData = treeData
+          // 设置默认展示杆塔层级
+          treeData.forEach(item => {
+            this.idArr.push(item.id);
+          })
+        }
+      }).catch(res => {
+
+      });
+    },
+    /* 人员树过滤 */
+    filterNode(value, data, node) {
+      if (!value) {
+        if (node.level == 1) {
+          node.expanded = true
+        } else {
+          node.expanded = false
+        }
+        return true
+      }
+      // 查询列表是否有匹配数据
+      let val = value.toLowerCase()
+      return this.chooseNode(val, data, node)
+    },
+    filterNode2(value, data, node) {
+      if (!value) {
+        if (node.level == 1) {
+          node.expanded = true
+        } else {
+          node.expanded = false
+        }
+        return true
+      }
+      // 查询列表是否有匹配数据
+      let val = value.toLowerCase()
+      return this.chooseNode(val, data, node)
+    },
+    // 过滤父节点 子节点:如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。
+    chooseNode(value, data, node) {
+      if (data.label.indexOf(value) !== -1) {
+        return true
+      }
+      const level = node.level
+      // 如果传入的节点本身就是一级节点就不用校验了
+      if (level === 1) {
+        return false
+      }
+      // 先取当前节点的父节点
+      let parentData = node.parent
+      // 遍历当前节点的父节点
+      let index = 0
+      while (index < level - 1) {
+        // 如果匹配到直接返回
+        if (parentData.data.label.indexOf(value) !== -1) {
+          return true
+        }
+        // 否则的话再往上一层做匹配
+        parentData = parentData.parent
+        index++
+      }
+      // 没匹配到返回false
+      return false
+    },
+
+    /* 加载抽检班组人员树 */
+    getTeamPersonByTower(params) {
+      teamPersonByTower(params).then(res => {
+        console.log(res);
+        const teamTreeData = res.data;
+        if (teamTreeData && teamTreeData.length > 0) {
+          this.teamTreeData = teamTreeData
+          // 设置默认展示杆塔层级
+          teamTreeData.forEach(item => {
+            this.idArr2.push(item.id);
+          })
+        }
+      }).catch(res => {
+
+      });
+    },
+    /* 手环人脸验证抽检 */
+    facialSampling() {
+      if (!this.towerId) {
+        this.$message({
+          message: '请选择杆塔',
+          type: 'warning'
+        });
+      } else {
+        this.filterText2 = '';
+        this.getTeamPersonByTower({ 'id': this.towerId });
+        this.dialogVisible1 = true;
+      }
+    },
+    handler({ BMap, map }) {
+      console.log(BMap, map);
+      this.center.lng = 116.404;
+      this.center.lat = 39.915;
+      this.zoom = 15;
+
+      // 缩放
+      map.enableScrollWheelZoom(true);
+
+      //设置地图风格
+      let mapStyle = { style: 'midnight' }
+      map.setMapStyle(mapStyle)
+      // map.setMapType(BMAP_PERSPECTIVE_MAP); //修改地图类型为3D地图
+      map.setMapType(BMAP_NORMAL_MAP); //普通地图
+      // map.setMapType(BMAP_HYBRID_MAP); //混合地图
+      // map.setMapType(BMAP_SATELLITE_MAP); //卫星地图
+    },
+    //人员树组件节点点击
+    handleNodeClick(data, node, item) {
+      this.towerId = undefined;
+      if (node.level === 2) {
+        // 选中杆塔赋值towerId,用于手环人员验证抽检
+        this.towerId = parseInt(data.id.replace('tower-', ''));
+      } else if ((node.level === 3 && node.expanded) || node.level === 4) {
+        // 选中班组层级并且展开 或者 人员 触发事件
+        console.log(data);
+        console.log(node);
+      }
+    },
+    //给梳妆街头不同层级设置不同的icon
+    renderContent(h, { node, data }) {
+      // 根据层级使用不同的图标
+      let icon;
+      if (node.level === 1) {
+        icon = 'el-icon-coin'; // 第一层使用主页图标
+      } else if (node.level === 2) {
+        icon = 'el-icon-s-unfold'; // 第二层使用展开图标
+      } else {
+        icon = 'el-icon-user'; // 其他层级使用平台图标
+      }
+
+      return (
+        <span class="custom-tree-node">
+          <i class={icon}></i>
+          <span>{node.label}</span>
+        </span>
+      );
+    },
+    updateCirclePath(e) {
+      this.circleRange.center = e.target.getCenter()
+      this.circleRange.radius = e.target.getRadius()
+    },
+    //展示设备详情
+    showWindow(event) {
+      console.log(event.target.getAttribute("class"))
+
+      // // 使用 event.target 获取触发事件的元素
+      // const triggerElement = event.target;
+      // // 获取元素上的属性值，例如 'data-value' 属性
+      // const attributeValue = triggerElement.getAttribute('position');
+      // console.log(attributeValue);
+    },
+    infoWindowClose(item) {
+      item.show = false;
+    },
+    infoWindowOpen(item) {
+      item.show = true;
+    },
+
+    //抽检弹框搜索
+    searchClick2() {
+      alert(this.keyword2)
+    },
+    //抽检树组件节点点击
+    teamTreeNodeClick(data) {
+      console.log(data.id)
+    },
+    //抽检树节点多选框值改变监听
+    teamTreeCheckChange(data, checked, indeterminate) {
+      console.log(data, checked, indeterminate)
+    },
+    //取消
+    spotCheckDialogClose() {
+      //清空搜索框
+      this.keyword2 = "";
+      //关闭对话框
+      this.dialogVisible1 = false
+    },
+
+    //取消
+    spotCheckDialogClose() {
+      //关闭对话框
+      this.dialogVisible2 = false
+    },
+    //发起抽检
+    startSpotCheck() {
+      //获取多选框勾选的值
+      const checkedNodes = this.$refs.teamTree.getCheckedNodes();
+      console.log(checkedNodes);
+
+
+      // this.dialogVisible1 = false
+    },
+
+    //验证人脸配置单选按钮值改变监听
+    provingTypeRadioChange(value) {
+      console.log(value)
+    },
+    //添加日期
+    addTimeInput() {
+      this.provingTimeValue.push('')
+    },
+    //删除日期
+    delTimeInput(index) {
+      this.provingTimeValue.splice(index, 1);
+    },
+
+
+    //验证对话框关闭
+    provingDialogClose() {
+      this.dialogVisible2 = false;
+    },
+    //验证对话框确认按钮
+    provingDialogConfirm() {
+      // provingTypeRadioValue intervalTime
+      if (this.provingTypeRadioValue == "1") {
+        console.log(this.provingTimeValue)
+      } else {
+        console.log(this.intervalTime)
+      }
 
 
-    .personManage .left{
-      width: 19.5%;
-      height: 100%;
-      float: left;
     }
-    .personManage .left>.title{
-      width: 100%;
-      height: 8%;
-      display: flex;
-      justify-content: center;
+  }
+};
+</script>
+<style lang="scss" scoped>
+.my-dialog {
+  top: 200px
+}
+
+.map {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+
+.personManage .bm-view {
+  width: 100%;
+  height: 100%;
+}
+
+
+.personManage .left {
+  width: 19.5%;
+  height: 100%;
+  float: left;
+  padding: 0 0.5%;
+  box-sizing: border-box;
+}
+
+.personManage .left>.title {
+  width: 100%;
+  height: 8%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.personManage .left>.content {
+  width: 100%;
+  height: 92%;
+}
+
+.personManage .center {
+  margin-left: 0.5%;
+  width: 59.5%;
+  height: 100%;
+  float: left;
+}
+
+.personManage .center>.title {
+  width: 100%;
+  height: 8%;
+  display: flex;
+  align-items: center;
+}
+
+.personManage .center>.content {
+  background-color: aqua;
+  width: 100%;
+  height: 92%;
+}
+
+
+
+.personManage .right {
+  margin-left: 0.5%;
+  width: 20%;
+  height: 100%;
+  float: left;
+}
+
+.personManage .right>.title {
+  width: 100%;
+  height: 10%;
+}
+
+.personManage .right>.content {
+  width: 100%;
+  height: 90%;
+  overflow: auto;
+}
+
+
+.dialog-footer button:first-child {
+  margin-right: 10px;
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+/* 滚动槽 */
+
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 5px #e8eceb;
+  border-radius: 5px;
+}
+
+/* 滚动条滑块 */
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #ffffff;
+  -webkit-box-shadow: inset 0 0 6px #cbb7b7;
+}
+
+::-webkit-scrollbar-thumb:window-inactive {
+  background: #e8eceb;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: #e8eceb;
+}
+
+::v-deep .el-dialog {
+  height: 78vh;
+  overflow: auto;
+}
+
+/* tree节点过长换行处理 */
+.tree {
+  width: 100%;
+
+  ::v-deep .el-tree-node {
+    white-space: normal;
+
+    .el-tree-node__content {
+      height: 100%;
       align-items: center;
+      margin: 4px 0;
     }
-    .personManage .left>.content{
-      width: 100%;
-      height: 92%;
-    }
+  }
 
-    .personManage .center{
-      margin-left: 0.5%;
-      width: 59.5%;
-      height: 100%;
-      float: left;
-    }
-    .personManage .center>.title{
-      width: 100%;
-      height: 8%;
-      display: flex;
-      align-items: center;
-    }
-    .personManage .center>.content{
-      background-color: aqua;
-      width: 100%;
-      height: 92%;
-    }
+  ::v-deep .el-tree-node__label {
+    font-size: 15px;
+  }
+}
 
-
-
-    .personManage .right{
-      margin-left: 0.5%;
-      width: 20%;
-      height: 100%;
-      float: left;
-    }
-    .personManage .right>.title{
-      width: 100%;
-      height: 10%;
-    }
-    .personManage .right>.content{
-      width: 100%;
-      height: 90%;
-      overflow: auto;
-    }
-  
-  
-    .dialog-footer button:first-child {
-      margin-right: 10px;
-    }
-    ::-webkit-scrollbar {
-      width: 5px;
-      height: 5px;
-    }
-    /* 滚动槽 */
-    
-    ::-webkit-scrollbar-track {
-        -webkit-box-shadow: inset 0 0 5px #e8eceb;
-        border-radius: 5px;
-    }
-    
-    /* 滚动条滑块 */
-    
-    ::-webkit-scrollbar-thumb {
-        border-radius: 10px;
-        background: #ffffff;
-        -webkit-box-shadow: inset 0 0 6px #cbb7b7;
-    }
-    
-    ::-webkit-scrollbar-thumb:window-inactive {
-        background: #e8eceb;
-    }
-    
-    ::-webkit-scrollbar-corner {
-        background-color: #e8eceb;
-    }
-    ::v-deep .el-dialog{
-      height: 78vh;
-      overflow: auto;
-    }
-  </style>
\ No newline at end of file
+::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+  color: #1890ff;
+}
+</style>