提交代码

.editorconfig

@@ -0,0 +1,22 @@
+# 告诉EditorConfig插件，这是根文件，不用继续往上查找
+root = true
+
+# 匹配全部文件
+[*]
+# 设置字符集
+charset = utf-8
+# 缩进风格，可选space、tab
+indent_style = space
+# 缩进的空格数
+indent_size = 2
+# 结尾换行符，可选lf、cr、crlf
+end_of_line = lf
+# 在文件结尾插入新行
+insert_final_newline = true
+# 删除一行中的前后空格
+trim_trailing_whitespace = true
+
+# 匹配md结尾的文件
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.env.development

@@ -0,0 +1,11 @@
+# 页面标题
+VUE_APP_TITLE = 四平市态势感知平台
+
+# 开发环境配置
+ENV = 'development'
+
+# 四平市态势感知平台/开发环境
+VUE_APP_BASE_API = '/dev-api'
+
+# 路由懒加载
+VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production

@@ -0,0 +1,8 @@
+# 页面标题
+VUE_APP_TITLE = 四平市态势感知平台
+
+# 生产环境配置
+ENV = 'production'
+
+# 四平市态势感知平台/生产环境
+VUE_APP_BASE_API = '/prod-api'

.env.staging

@@ -0,0 +1,10 @@
+# 页面标题
+VUE_APP_TITLE = 四平市态势感知平台
+
+NODE_ENV = production
+
+# 测试环境配置
+ENV = 'staging'
+
+# 四平市态势感知平台/测试环境
+VUE_APP_BASE_API = '/stage-api'

.eslintignore

@@ -0,0 +1,10 @@
+# 忽略build目录下类型为js的文件的语法检查
+build/*.js
+# 忽略src/assets目录下文件的语法检查
+src/assets
+# 忽略public目录下文件的语法检查
+public
+# 忽略当前目录下为js的文件的语法检查
+*.js
+# 忽略当前目录下为vue的文件的语法检查
+*.vue

.eslintrc.js

@@ -0,0 +1,199 @@
+// ESlint 检查配置
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint',
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  extends: ['plugin:vue/recommended', 'eslint:recommended'],
+
+  // add your custom rules here
+  //it is base on https://github.com/vuejs/eslint-config-vue
+  rules: {
+    "vue/max-attributes-per-line": [2, {
+      "singleline": 10,
+      "multiline": {
+        "max": 1,
+        "allowFirstLine": false
+      }
+    }],
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/multiline-html-element-content-newline":"off",
+    "vue/name-property-casing": ["error", "PascalCase"],
+    "vue/no-v-html": "off",
+    'accessor-pairs': 2,
+    'arrow-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'block-spacing': [2, 'always'],
+    'brace-style': [2, '1tbs', {
+      'allowSingleLine': true
+    }],
+    'camelcase': [0, {
+      'properties': 'always'
+    }],
+    'comma-dangle': [2, 'never'],
+    'comma-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'comma-style': [2, 'last'],
+    'constructor-super': 2,
+    'curly': [2, 'multi-line'],
+    'dot-location': [2, 'property'],
+    'eol-last': 2,
+    'eqeqeq': ["error", "always", {"null": "ignore"}],
+    'generator-star-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'handle-callback-err': [2, '^(err|error)$'],
+    'indent': [2, 2, {
+      'SwitchCase': 1
+    }],
+    'jsx-quotes': [2, 'prefer-single'],
+    'key-spacing': [2, {
+      'beforeColon': false,
+      'afterColon': true
+    }],
+    'keyword-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'new-cap': [2, {
+      'newIsCap': true,
+      'capIsNew': false
+    }],
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-caller': 2,
+    'no-console': 'off',
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 0,
+    'no-delete-var': 2,
+    'no-dupe-args': 2,
+    'no-dupe-class-members': 2,
+    'no-dupe-keys': 2,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 2,
+    'no-empty-pattern': 2,
+    'no-eval': 2,
+    'no-ex-assign': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'functions'],
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-func-assign': 2,
+    'no-implied-eval': 2,
+    'no-inner-declarations': [2, 'functions'],
+    'no-invalid-regexp': 2,
+    'no-irregular-whitespace': 2,
+    'no-iterator': 2,
+    'no-label-var': 2,
+    'no-labels': [2, {
+      'allowLoop': false,
+      'allowSwitch': false
+    }],
+    'no-lone-blocks': 2,
+    'no-mixed-spaces-and-tabs': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-multiple-empty-lines': [2, {
+      'max': 1
+    }],
+    'no-native-reassign': 2,
+    'no-negated-in-lhs': 2,
+    'no-new-object': 2,
+    'no-new-require': 2,
+    'no-new-symbol': 2,
+    'no-new-wrappers': 2,
+    'no-obj-calls': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 2,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-regex-spaces': 2,
+    'no-return-assign': [2, 'except-parens'],
+    'no-self-assign': 2,
+    'no-self-compare': 2,
+    'no-sequences': 2,
+    'no-shadow-restricted-names': 2,
+    'no-spaced-func': 2,
+    'no-sparse-arrays': 2,
+    'no-this-before-super': 2,
+    'no-throw-literal': 2,
+    'no-trailing-spaces': 2,
+    'no-undef': 2,
+    'no-undef-init': 2,
+    'no-unexpected-multiline': 2,
+    'no-unmodified-loop-condition': 2,
+    'no-unneeded-ternary': [2, {
+      'defaultAssignment': false
+    }],
+    'no-unreachable': 2,
+    'no-unsafe-finally': 2,
+    'no-unused-vars': [2, {
+      'vars': 'all',
+      'args': 'none'
+    }],
+    'no-useless-call': 2,
+    'no-useless-computed-key': 2,
+    'no-useless-constructor': 2,
+    'no-useless-escape': 0,
+    'no-whitespace-before-property': 2,
+    'no-with': 2,
+    'one-var': [2, {
+      'initialized': 'never'
+    }],
+    'operator-linebreak': [2, 'after', {
+      'overrides': {
+        '?': 'before',
+        ':': 'before'
+      }
+    }],
+    'padded-blocks': [2, 'never'],
+    'quotes': [2, 'single', {
+      'avoidEscape': true,
+      'allowTemplateLiterals': true
+    }],
+    'semi': [2, 'never'],
+    'semi-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'space-before-blocks': [2, 'always'],
+    'space-before-function-paren': [2, 'never'],
+    'space-in-parens': [2, 'never'],
+    'space-infix-ops': 2,
+    'space-unary-ops': [2, {
+      'words': true,
+      'nonwords': false
+    }],
+    'spaced-comment': [2, 'always', {
+      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+    }],
+    'template-curly-spacing': [2, 'never'],
+    'use-isnan': 2,
+    'valid-typeof': 2,
+    'wrap-iife': [2, 'any'],
+    'yield-star-spacing': [2, 'both'],
+    'yoda': [2, 'never'],
+    'prefer-const': 2,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'object-curly-spacing': [2, 'always', {
+      objectsInObjects: false
+    }],
+    'array-bracket-spacing': [2, 'never']
+  }
+}

.gitignore

@@ -0,0 +1,27 @@
+.DS_Store
+node_modules/
+dist/
+public/supermap
+public/SuperMap3D
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+**/*.log
+
+tests/**/coverage/
+tests/e2e/reports
+selenium-debug.log
+
+# Editor directories and files
+node_modules
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.local
+*.iml
+
+package-lock.json
+yarn.lock

.history/src/api/leader_20240715155057.js

@@ -0,0 +1,57 @@
+import request from '@/utils/request'
+
+// 获取左侧
+export function getRy() {
+  return request({
+    url: '/center-data/forestView/getRyList',
+    method: 'post',
+    data:{}
+  })
+}
+
+// 获取左侧人员列表
+export function getForestLeader(linJob,linType,name) {
+  return request({
+    url: '/center-data/forestView/getForestLeader',
+    method: 'post',
+    data:{
+      linJob:linJob,
+      linType:linType,
+      name
+    }
+  })
+}
+
+// 巡林任务
+export function getPlanList(userId) {
+  return request({
+    url: '/center-data/task/getPlanList',
+    method: 'post',
+    data: {userId:userId,type:'1'}
+  })
+}
+
+
+// 获取林长管理对应地图
+export function getlinleaderMap(userId) {
+  return request({
+    url: '/center-data/linleader/getlinleaderMap/'+userId,
+    method: 'get',
+  })
+}
+
+// 巡林记录
+export function getRecordList(taskId,userId) {
+  return request({
+    url: '/center-data/record/list?taskId='+taskId+'&userId='+userId,
+    method: 'get',
+  })
+}
+
+// 巡林轨迹
+export function getPointList(recordId) {
+  return request({
+    url: '/center-data/patrolTrack/getTrack/'+recordId.toString(),
+    method: 'get',
+  })
+}

.history/src/api/leader_20240716103511.js

@@ -0,0 +1,66 @@
+import request from '@/utils/request'
+
+// 获取左侧
+export function getRy() {
+  return request({
+    url: '/center-data/forestView/getRyList',
+    method: 'post',
+    data:{}
+  })
+}
+
+// 查询林长级别
+
+export function getNumByLevel() {
+  return request({
+    url: '/center-data/forestView/getNumByLevel',
+    method: 'get'
+  })
+}
+
+// 获取左侧人员列表
+export function getForestLeader(linJob,linType,name) {
+  return request({
+    url: '/center-data/forestView/getForestLeader',
+    method: 'post',
+    data:{
+      linJob:linJob,
+      linType:linType,
+      name
+    }
+  })
+}
+
+// 巡林任务
+export function getPlanList(userId) {
+  return request({
+    url: '/center-data/task/getPlanList',
+    method: 'post',
+    data: {userId:userId,type:'1'}
+  })
+}
+
+
+// 获取林长管理对应地图
+export function getlinleaderMap(userId) {
+  return request({
+    url: '/center-data/linleader/getlinleaderMap/'+userId,
+    method: 'get',
+  })
+}
+
+// 巡林记录
+export function getRecordList(taskId,userId) {
+  return request({
+    url: '/center-data/record/list?taskId='+taskId+'&userId='+userId,
+    method: 'get',
+  })
+}
+
+// 巡林轨迹
+export function getPointList(recordId) {
+  return request({
+    url: '/center-data/patrolTrack/getTrack/'+recordId.toString(),
+    method: 'get',
+  })
+}

.history/src/api/leader_20240716103903.js

@@ -0,0 +1,68 @@
+import request from '@/utils/request'
+
+// 获取左侧
+export function getRy() {
+  return request({
+    url: '/center-data/forestView/getRyList',
+    method: 'post',
+    data:{
+      level:''
+    }
+  })
+}
+
+// 查询林长级别
+
+export function getNumByLevel() {
+  return request({
+    url: '/center-data/forestView/getNumByLevel',
+    method: 'get'
+  })
+}
+
+// 获取左侧人员列表
+export function getForestLeader(linJob,linType,name) {
+  return request({
+    url: '/center-data/forestView/getForestLeader',
+    method: 'post',
+    data:{
+      linJob:linJob,
+      linType:linType,
+      name
+    }
+  })
+}
+
+// 巡林任务
+export function getPlanList(userId) {
+  return request({
+    url: '/center-data/task/getPlanList',
+    method: 'post',
+    data: {userId:userId,type:'1'}
+  })
+}
+
+
+// 获取林长管理对应地图
+export function getlinleaderMap(userId) {
+  return request({
+    url: '/center-data/linleader/getlinleaderMap/'+userId,
+    method: 'get',
+  })
+}
+
+// 巡林记录
+export function getRecordList(taskId,userId) {
+  return request({
+    url: '/center-data/record/list?taskId='+taskId+'&userId='+userId,
+    method: 'get',
+  })
+}
+
+// 巡林轨迹
+export function getPointList(recordId) {
+  return request({
+    url: '/center-data/patrolTrack/getTrack/'+recordId.toString(),
+    method: 'get',
+  })
+}

.history/src/api/leader_20240716104951.js

@@ -0,0 +1,68 @@
+import request from '@/utils/request'
+
+// 获取左侧
+export function getRy(level= '') {
+  return request({
+    url: '/center-data/forestView/getRyList',
+    method: 'post',
+    data:{
+      level
+    }
+  })
+}
+
+// 查询林长级别
+
+export function getNumByLevel() {
+  return request({
+    url: '/center-data/forestView/getNumByLevel',
+    method: 'get'
+  })
+}
+
+// 获取左侧人员列表
+export function getForestLeader(linJob,linType,name) {
+  return request({
+    url: '/center-data/forestView/getForestLeader',
+    method: 'post',
+    data:{
+      linJob:linJob,
+      linType:linType,
+      name
+    }
+  })
+}
+
+// 巡林任务
+export function getPlanList(userId) {
+  return request({
+    url: '/center-data/task/getPlanList',
+    method: 'post',
+    data: {userId:userId,type:'1'}
+  })
+}
+
+
+// 获取林长管理对应地图
+export function getlinleaderMap(userId) {
+  return request({
+    url: '/center-data/linleader/getlinleaderMap/'+userId,
+    method: 'get',
+  })
+}
+
+// 巡林记录
+export function getRecordList(taskId,userId) {
+  return request({
+    url: '/center-data/record/list?taskId='+taskId+'&userId='+userId,
+    method: 'get',
+  })
+}
+
+// 巡林轨迹
+export function getPointList(recordId) {
+  return request({
+    url: '/center-data/patrolTrack/getTrack/'+recordId.toString(),
+    method: 'get',
+  })
+}

.history/src/api/leader_20240716105105.js

@@ -0,0 +1,65 @@
+import request from '@/utils/request'
+
+// 获取左侧
+export function getRy(level= '') {
+  return request({
+    url: `/center-data/forestView/getRyList?level=${level}`,
+    method: 'post',
+  })
+}
+
+// 查询林长级别
+
+export function getNumByLevel() {
+  return request({
+    url: '/center-data/forestView/getNumByLevel',
+    method: 'get'
+  })
+}
+
+// 获取左侧人员列表
+export function getForestLeader(linJob,linType,name) {
+  return request({
+    url: '/center-data/forestView/getForestLeader',
+    method: 'post',
+    data:{
+      linJob:linJob,
+      linType:linType,
+      name
+    }
+  })
+}
+
+// 巡林任务
+export function getPlanList(userId) {
+  return request({
+    url: '/center-data/task/getPlanList',
+    method: 'post',
+    data: {userId:userId,type:'1'}
+  })
+}
+
+
+// 获取林长管理对应地图
+export function getlinleaderMap(userId) {
+  return request({
+    url: '/center-data/linleader/getlinleaderMap/'+userId,
+    method: 'get',
+  })
+}
+
+// 巡林记录
+export function getRecordList(taskId,userId) {
+  return request({
+    url: '/center-data/record/list?taskId='+taskId+'&userId='+userId,
+    method: 'get',
+  })
+}
+
+// 巡林轨迹
+export function getPointList(recordId) {
+  return request({
+    url: '/center-data/patrolTrack/getTrack/'+recordId.toString(),
+    method: 'get',
+  })
+}

.history/src/api/leader_20240716105139.js

@@ -0,0 +1,65 @@
+import request from '@/utils/request'
+
+// 获取左侧
+export function getRy(level= '') {
+  return request({
+    url: `/center-data/forestView/getRyList?level=${level}`,
+    method: 'get',
+  })
+}
+
+// 查询林长级别
+
+export function getNumByLevel() {
+  return request({
+    url: '/center-data/forestView/getNumByLevel',
+    method: 'get'
+  })
+}
+
+// 获取左侧人员列表
+export function getForestLeader(linJob,linType,name) {
+  return request({
+    url: '/center-data/forestView/getForestLeader',
+    method: 'post',
+    data:{
+      linJob:linJob,
+      linType:linType,
+      name
+    }
+  })
+}
+
+// 巡林任务
+export function getPlanList(userId) {
+  return request({
+    url: '/center-data/task/getPlanList',
+    method: 'post',
+    data: {userId:userId,type:'1'}
+  })
+}
+
+
+// 获取林长管理对应地图
+export function getlinleaderMap(userId) {
+  return request({
+    url: '/center-data/linleader/getlinleaderMap/'+userId,
+    method: 'get',
+  })
+}
+
+// 巡林记录
+export function getRecordList(taskId,userId) {
+  return request({
+    url: '/center-data/record/list?taskId='+taskId+'&userId='+userId,
+    method: 'get',
+  })
+}
+
+// 巡林轨迹
+export function getPointList(recordId) {
+  return request({
+    url: '/center-data/patrolTrack/getTrack/'+recordId.toString(),
+    method: 'get',
+  })
+}

.history/src/api/leader_20240716105203.js

@@ -0,0 +1,68 @@
+import request from '@/utils/request'
+
+// 获取左侧
+export function getRy(level= '') {
+  return request({
+    url: '/center-data/forestView/getRyList',
+    method: 'post',
+    data:{
+      level
+    }
+  })
+}
+
+// 查询林长级别
+
+export function getNumByLevel() {
+  return request({
+    url: '/center-data/forestView/getNumByLevel',
+    method: 'get'
+  })
+}
+
+// 获取左侧人员列表
+export function getForestLeader(linJob,linType,name) {
+  return request({
+    url: '/center-data/forestView/getForestLeader',
+    method: 'post',
+    data:{
+      linJob:linJob,
+      linType:linType,
+      name
+    }
+  })
+}
+
+// 巡林任务
+export function getPlanList(userId) {
+  return request({
+    url: '/center-data/task/getPlanList',
+    method: 'post',
+    data: {userId:userId,type:'1'}
+  })
+}
+
+
+// 获取林长管理对应地图
+export function getlinleaderMap(userId) {
+  return request({
+    url: '/center-data/linleader/getlinleaderMap/'+userId,
+    method: 'get',
+  })
+}
+
+// 巡林记录
+export function getRecordList(taskId,userId) {
+  return request({
+    url: '/center-data/record/list?taskId='+taskId+'&userId='+userId,
+    method: 'get',
+  })
+}
+
+// 巡林轨迹
+export function getPointList(recordId) {
+  return request({
+    url: '/center-data/patrolTrack/getTrack/'+recordId.toString(),
+    method: 'get',
+  })
+}

.history/src/api/leader_20240716112247.js

@@ -0,0 +1,69 @@
+import request from '@/utils/request'
+
+// 获取左侧
+export function getRy(level= '') {
+  return request({
+    url: '/center-data/forestView/getRyList',
+    method: 'post',
+    data:{
+      level
+    }
+  })
+}
+
+// 查询林长级别
+
+export function getNumByLevel() {
+  return request({
+    url: '/center-data/forestView/getNumByLevel',
+    method: 'get'
+  })
+}
+
+// 获取左侧人员列表
+export function getForestLeader(linJob,linType,name,level='') {
+  return request({
+    url: '/center-data/forestView/getForestLeader',
+    method: 'post',
+    data:{
+      linJob:linJob,
+      linType:linType,
+      name,
+      level
+    }
+  })
+}
+
+// 巡林任务
+export function getPlanList(userId) {
+  return request({
+    url: '/center-data/task/getPlanList',
+    method: 'post',
+    data: {userId:userId,type:'1'}
+  })
+}
+
+
+// 获取林长管理对应地图
+export function getlinleaderMap(userId) {
+  return request({
+    url: '/center-data/linleader/getlinleaderMap/'+userId,
+    method: 'get',
+  })
+}
+
+// 巡林记录
+export function getRecordList(taskId,userId) {
+  return request({
+    url: '/center-data/record/list?taskId='+taskId+'&userId='+userId,
+    method: 'get',
+  })
+}
+
+// 巡林轨迹
+export function getPointList(recordId) {
+  return request({
+    url: '/center-data/patrolTrack/getTrack/'+recordId.toString(),
+    method: 'get',
+  })
+}

.history/src/components/DataCenter_Distribution/index_20231016100108.vue

@@ -0,0 +1,69 @@
+<!-- 
+    *@description: 数据中心 数据分布
+    *@author: yh Fu
+    *@date: 2023-08-23 14:45:16
+    *@version: V1.0.5 
+    -->
+
+<template>
+    <!-- 右侧 -->
+    <div class="rightbar" v-if="showSearch == true">
+        <div class="forthis">
+            <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            >
+            <img
+                src="@/assets/images/integrated/light.png"
+                style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+                <span>数据分布</span>
+                <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+                />
+            </div>
+            <div class="i-list-con h-73">
+                <div class="overflow-y" style="height: 39vh">
+                <div
+                    class="d-l-con"
+                    :class="{ on: listCurrentIndex == item.deptId }"
+                    v-for="item in deptGroupList"
+                    :key="item.deptId"
+                    v-on:click="indentleftByDeptIdSetMarkersForParent(item.deptId)"
+                >
+                    <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.deptName }}</h4>
+                    </div>
+                    <div class="d-l-l-count">{{ item.count }}</div>
+                </div>
+                </div>
+                <div class="overflow-y" style="height: 34vh">
+                <div id="data-chart" style="width: 100%; height: 34vh"></div>
+                </div>
+            </div>
+            </dv-border-box-13>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name:'Distribution',
+    //      是否展示Flag    资源列表数据    当前资源索引
+    props:['showSearch','deptGroupList','listCurrentIndex'],
+    data() {
+        return {
+
+        }
+    },
+    mounted(){
+    },
+    methods:{
+        indentleftByDeptIdSetMarkersForParent(deptId){
+            this.$emit('indentleftByDeptIdSetMarkersOfParent',deptId)
+        }
+    }
+}
+</script>

.history/src/components/DataCenter_Distribution/index_20240401153043.vue

@@ -0,0 +1,99 @@
+<!-- 
+    *@description: 数据中心 数据分布
+    *@author: yh Fu
+    *@date: 2023-08-23 14:45:16
+    *@version: V1.0.5 
+    -->
+
+<template>
+    <!-- 右侧 -->
+    <div class="rightbar" v-if="showSearch == true">
+        <div class="forthis">
+            <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            >
+            <img
+                src="@/assets/images/integrated/light.png"
+                style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+                <span>数据分布</span>
+                <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+                />
+            </div>
+            <div class="i-list-con h-73">
+                <div class="head-container tree-scrollbar" style="height: 39vh; overflow-y: auto">
+                    <el-tree :data="treeDept" :props="defaultProps" :expand-on-click-node="false"
+                            :filter-node-method="filterNode" ref="tree" node-key="id" :default-expanded-keys="[100]"
+                            @node-click="indentleftByDeptIdSetMarkersForParent" />
+                </div>
+                <div class="overflow-y" style="height: 34vh">
+                <div id="data-chart" style="width: 100%; height: 34vh"></div>
+                </div>
+            </div>
+            </dv-border-box-13>
+        </div>
+    </div>
+</template>
+
+<script>
+import {treeselect} from "@/api/system/dept";
+export default {
+    name:'Distribution',
+    //      是否展示Flag    资源列表数据    当前资源索引
+    props:['showSearch','deptGroupList','listCurrentIndex'],
+    data() {
+        return {
+            treeDept:[],
+            deptOptions:[],
+            defaultProps: {
+                children: "children",
+                label: "label",
+            },
+        }
+    },
+    mounted(){
+        this.getTreeselect();
+        this.deptOptions = this.deptGroupList
+        this.setDeptNum(this.deptOptions);
+    },
+    methods:{
+        indentleftByDeptIdSetMarkersForParent(deptId){
+            this.$emit('indentleftByDeptIdSetMarkersOfParent',deptId)
+        }
+    },
+    /**
+     * deptList:树型结构集合
+     * this.deptDataList:接口返回的数据项（统计用）
+     * this.message：要展示在页面的数据项
+     */
+    setDeptNum(deptList){
+      deptList.forEach((item, i) => {
+        item.count = 0;
+        item.label = item.label.indexOf('(') > -1 ? item.label.substring(0,item.label.indexOf('(')):item.label;
+        this.deptGroupList.forEach((itemy, y) => {
+          if(item.id==itemy.deptId){
+            item.count=itemy.count
+          }
+        })
+        if(item.hasOwnProperty("children")){
+          this.setDeptNum(item.children)
+          item.count = item.count+item.children.reduce((sum, itemz) => sum + itemz.count, 0);
+        }
+        item.label = item.label+"("+item.count+")";
+      })
+      this.treeDept = deptList;
+    },
+    getTreeselect() {
+      treeselect().then((response) => {
+        this.deptOptions = response.data;
+      });
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+}
+</script>

.history/src/components/DataCenter_Distribution/index_20240401153138.vue

@@ -0,0 +1,99 @@
+<!-- 
+    *@description: 数据中心 数据分布
+    *@author: yh Fu
+    *@date: 2023-08-23 14:45:16
+    *@version: V1.0.5 
+    -->
+
+<template>
+    <!-- 右侧 -->
+    <div class="rightbar" v-if="showSearch == true">
+        <div class="forthis">
+            <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            >
+            <img
+                src="@/assets/images/integrated/light.png"
+                style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+                <span>数据分布</span>
+                <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+                />
+            </div>
+            <div class="i-list-con h-73">
+                <div class="head-container tree-scrollbar" style="height: 39vh; overflow-y: auto">
+                    <el-tree :data="treeDept" :props="defaultProps" :expand-on-click-node="false"
+                            :filter-node-method="filterNode" ref="tree" node-key="id" :default-expanded-keys="[100]"
+                            @node-click="indentleftByDeptIdSetMarkersForParent" />
+                </div>
+                <div class="overflow-y" style="height: 34vh">
+                <div id="data-chart" style="width: 100%; height: 34vh"></div>
+                </div>
+            </div>
+            </dv-border-box-13>
+        </div>
+    </div>
+</template>
+
+<script>
+import {treeselect} from "@/api/system/dept";
+export default {
+    name:'Distribution',
+    //      是否展示Flag    资源列表数据    当前资源索引
+    props:['showSearch','deptGroupList','listCurrentIndex'],
+    data() {
+        return {
+            treeDept:[],
+            deptOptions:[],
+            defaultProps: {
+                children: "children",
+                label: "label",
+            },
+        }
+    },
+    mounted(){
+        this.getTreeselect();
+        this.deptOptions = this.deptGroupList
+        this.setDeptNum(this.deptOptions);
+    },
+    methods:{
+        indentleftByDeptIdSetMarkersForParent(deptId){
+            this.$emit('indentleftByDeptIdSetMarkersOfParent',deptId)
+        },
+        /**
+         * deptList:树型结构集合
+         * this.deptDataList:接口返回的数据项（统计用）
+         * this.message：要展示在页面的数据项
+         */
+        setDeptNum(deptList){
+        deptList.forEach((item, i) => {
+            item.count = 0;
+            item.label = item.label.indexOf('(') > -1 ? item.label.substring(0,item.label.indexOf('(')):item.label;
+            this.deptGroupList.forEach((itemy, y) => {
+            if(item.id==itemy.deptId){
+                item.count=itemy.count
+            }
+            })
+            if(item.hasOwnProperty("children")){
+            this.setDeptNum(item.children)
+            item.count = item.count+item.children.reduce((sum, itemz) => sum + itemz.count, 0);
+            }
+            item.label = item.label+"("+item.count+")";
+        })
+        this.treeDept = deptList;
+        },
+        getTreeselect() {
+        treeselect().then((response) => {
+            this.deptOptions = response.data;
+        });
+        },
+        filterNode(value, data) {
+        if (!value) return true;
+        return data.label.indexOf(value) !== -1;
+        },
+    },
+}
+</script>

.history/src/components/DataCenter_Distribution/index_20240401153321.vue

@@ -0,0 +1,99 @@
+<!-- 
+    *@description: 数据中心 数据分布
+    *@author: yh Fu
+    *@date: 2023-08-23 14:45:16
+    *@version: V1.0.5 
+    -->
+
+<template>
+    <!-- 右侧 -->
+    <div class="rightbar" v-if="showSearch == true">
+        <div class="forthis">
+            <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            >
+            <img
+                src="@/assets/images/integrated/light.png"
+                style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+                <span>数据分布</span>
+                <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+                />
+            </div>
+            <div class="i-list-con h-73">
+                <div class="head-container tree-scrollbar" style="height: 39vh; overflow-y: auto">
+                    <el-tree :data="treeDept" :props="defaultProps" :expand-on-click-node="false"
+                            :filter-node-method="filterNode" ref="tree" node-key="id" :default-expanded-keys="[100]"
+                            @node-click="indentleftByDeptIdSetMarkersForParent" />
+                </div>
+                <div class="overflow-y" style="height: 34vh">
+                <div id="data-chart" style="width: 100%; height: 34vh"></div>
+                </div>
+            </div>
+            </dv-border-box-13>
+        </div>
+    </div>
+</template>
+
+<script>
+import {treeselect} from "@/api/system/dept";
+export default {
+    name:'Distribution',
+    //      是否展示Flag    资源列表数据    当前资源索引
+    props:['showSearch','deptGroupList','listCurrentIndex'],
+    data() {
+        return {
+            treeDept:[],
+            deptOptions:[],
+            defaultProps: {
+                children: "children",
+                label: "label",
+            },
+        }
+    },
+    mounted(){
+        this.getTreeselect();
+        this.deptOptions = this.deptGroupList
+        this.setDeptNum(this.deptOptions);
+    },
+    methods:{
+        indentleftByDeptIdSetMarkersForParent(deptId){
+            this.$emit('indentleftByDeptIdSetMarkersOfParent',deptId)
+        },
+        /**
+         * deptList:树型结构集合
+         * this.deptDataList:接口返回的数据项（统计用）
+         * this.message：要展示在页面的数据项
+         */
+        setDeptNum(deptList){
+            deptList.forEach((item, i) => {
+                item.count = 0;
+                item.label = item.label.indexOf('(') > -1 ? item.label.substring(0,item.label.indexOf('(')):item.label;
+                this.deptGroupList.forEach((itemy, y) => {
+                if(item.id==itemy.deptId){
+                    item.count=itemy.count
+                }
+                })
+                if(item.hasOwnProperty("children")){
+                this.setDeptNum(item.children)
+                item.count = item.count+item.children.reduce((sum, itemz) => sum + itemz.count, 0);
+                }
+                item.label = item.label+"("+item.count+")";
+            })
+            this.treeDept = deptList;
+        },
+        getTreeselect() {
+        treeselect().then((response) => {
+            this.deptOptions = response.data;
+        });
+        },
+        filterNode(value, data) {
+        if (!value) return true;
+        return data.label.indexOf(value) !== -1;
+        },
+    },
+}
+</script>

.history/src/components/DataCenter_Distribution/index_20240401153415.vue

@@ -0,0 +1,98 @@
+<!-- 
+    *@description: 数据中心 数据分布
+    *@author: yh Fu
+    *@date: 2023-08-23 14:45:16
+    *@version: V1.0.5 
+    -->
+
+<template>
+    <!-- 右侧 -->
+    <div class="rightbar" v-if="showSearch == true">
+        <div class="forthis">
+            <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            >
+            <img
+                src="@/assets/images/integrated/light.png"
+                style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+                <span>数据分布</span>
+                <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+                />
+            </div>
+            <div class="i-list-con h-73">
+                <div class="head-container tree-scrollbar" style="height: 39vh; overflow-y: auto">
+                    <el-tree :data="treeDept" :props="defaultProps" :expand-on-click-node="false"
+                            :filter-node-method="filterNode" ref="tree" node-key="id" :default-expanded-keys="[100]"
+                            @node-click="indentleftByDeptIdSetMarkersForParent" />
+                </div>
+                <div class="overflow-y" style="height: 34vh">
+                <div id="data-chart" style="width: 100%; height: 34vh"></div>
+                </div>
+            </div>
+            </dv-border-box-13>
+        </div>
+    </div>
+</template>
+
+<script>
+import {treeselect} from "@/api/system/dept";
+export default {
+    name:'Distribution',
+    //      是否展示Flag    资源列表数据    当前资源索引
+    props:['showSearch','deptGroupList','listCurrentIndex'],
+    data() {
+        return {
+            treeDept:[],
+            deptOptions:[],
+            defaultProps: {
+                children: "children",
+                label: "label",
+            },
+        }
+    },
+    mounted(){
+        this.getTreeselect();
+    },
+    methods:{
+        indentleftByDeptIdSetMarkersForParent(deptId){
+            this.$emit('indentleftByDeptIdSetMarkersOfParent',deptId)
+        },
+        /**
+         * deptList:树型结构集合
+         * this.deptDataList:接口返回的数据项（统计用）
+         * this.message：要展示在页面的数据项
+         */
+        setDeptNum(deptList){
+            deptList.forEach((item, i) => {
+                item.count = 0;
+                item.label = item.label.indexOf('(') > -1 ? item.label.substring(0,item.label.indexOf('(')):item.label;
+                this.deptGroupList.forEach((itemy, y) => {
+                if(item.id==itemy.deptId){
+                    item.count=itemy.count
+                }
+                })
+                if(item.hasOwnProperty("children")){
+                this.setDeptNum(item.children)
+                item.count = item.count+item.children.reduce((sum, itemz) => sum + itemz.count, 0);
+                }
+                item.label = item.label+"("+item.count+")";
+            })
+            this.treeDept = deptList;
+        },
+        getTreeselect() {
+        treeselect().then((response) => {
+            this.deptOptions = response.data;
+            this.setDeptNum(this.deptOptions);
+        });
+        },
+        filterNode(value, data) {
+        if (!value) return true;
+        return data.label.indexOf(value) !== -1;
+        },
+    },
+}
+</script>

.history/src/views/leader_20240715155057.vue

@@ -0,0 +1,668 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 37vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 43vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data.visuForestCloudRYBO;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+</style>

.history/src/views/leader_20240716102533.vue

@@ -0,0 +1,675 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select>
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.value" :label="item.label"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 37vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 43vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data.visuForestCloudRYBO;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+</style>

.history/src/views/leader_20240716102805.vue

@@ -0,0 +1,681 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select class="select_level">
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.value" :label="item.label"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 37vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 43vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data.visuForestCloudRYBO;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+.select_level{
+   .el-select{
+    width: 97%;
+    margin: auto;
+  }
+}
+</style>

.history/src/views/leader_20240716102817.vue

@@ -0,0 +1,681 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select class="select_level">
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.value" :label="item.label"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 37vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 43vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data.visuForestCloudRYBO;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+.select_level{
+   ::v-deep .el-select{
+    width: 97%;
+    margin: auto;
+  }
+}
+</style>

.history/src/views/leader_20240716102831.vue

@@ -0,0 +1,681 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select class="select_level">
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.value" :label="item.label"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 37vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 43vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data.visuForestCloudRYBO;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+   .el-select{
+    width: 97%;
+    margin: auto;
+  }
+}
+</style>

.history/src/views/leader_20240716102846.vue

@@ -0,0 +1,679 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select class="select_level">
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.value" :label="item.label"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 37vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 43vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data.visuForestCloudRYBO;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+</style>

.history/src/views/leader_20240716102925.vue

@@ -0,0 +1,679 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select class="select_level">
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.value" :label="item.label"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 31vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 43vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data.visuForestCloudRYBO;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+</style>

.history/src/views/leader_20240716103015.vue

@@ -0,0 +1,682 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择部门"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.value" :label="item.label"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 31vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 43vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data.visuForestCloudRYBO;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+</style>

.history/src/views/leader_20240716103641.vue

@@ -0,0 +1,687 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择部门"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.value" :label="item.label"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 31vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 43vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data.visuForestCloudRYBO;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      debugger
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+</style>

.history/src/views/leader_20240716103809.vue

@@ -0,0 +1,687 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择部门"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.level" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 31vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 43vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data.visuForestCloudRYBO;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+</style>

.history/src/views/leader_20240716103826.vue

@@ -0,0 +1,687 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.level" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 31vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 43vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data.visuForestCloudRYBO;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+</style>

.history/src/views/leader_20240716104019.vue

@@ -0,0 +1,688 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.level" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 31vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 43vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data.visuForestCloudRYBO;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+        console.log('当前林长列表',that.visuForestCloudRYBO)
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+</style>

.history/src/views/leader_20240716104106.vue

@@ -0,0 +1,688 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.level" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 31vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 43vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+        console.log('当前林长列表',that.visuForestCloudRYBO)
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+</style>

.history/src/views/leader_20240716104334.vue

@@ -0,0 +1,688 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.level" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 38vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 30vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+        console.log('当前林长列表',that.visuForestCloudRYBO)
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+</style>

.history/src/views/leader_20240716104350.vue

@@ -0,0 +1,688 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.level" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 38vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+        console.log('当前林长列表',that.visuForestCloudRYBO)
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+</style>

.history/src/views/leader_20240716104418.vue

@@ -0,0 +1,688 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.level" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 38vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 32vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+        console.log('当前林长列表',that.visuForestCloudRYBO)
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+</style>

.history/src/views/leader_20240716104721.vue

@@ -0,0 +1,695 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.level" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 38vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            class="userInformation"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+        console.log('当前林长列表',that.visuForestCloudRYBO)
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+::v-deep .userInformation{
+  .border-box-content{
+    overflow: hidden;
+  }
+
+}
+</style>

.history/src/views/leader_20240716104902.vue

@@ -0,0 +1,699 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          @change="levelHasChanged"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.level" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 38vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            class="userInformation"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    levelHasChanged(val){
+      debugger
+    },
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+        console.log('当前林长列表',that.visuForestCloudRYBO)
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+::v-deep .userInformation{
+  .border-box-content{
+    overflow: hidden;
+  }
+
+}
+</style>

.history/src/views/leader_20240716104956.vue

@@ -0,0 +1,701 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          @change="levelHasChanged"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.level" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 38vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            class="userInformation"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    levelHasChanged(val){
+      getRy(val).then(res => {
+        debugger
+      })
+    },
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+        console.log('当前林长列表',that.visuForestCloudRYBO)
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+::v-deep .userInformation{
+  .border-box-content{
+    overflow: hidden;
+  }
+
+}
+</style>

.history/src/views/leader_20240716105116.vue

@@ -0,0 +1,700 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          @change="levelHasChanged"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.level" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 38vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            class="userInformation"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    levelHasChanged(val){
+      getRy(val).then(res => {
+      })
+    },
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+        console.log('当前林长列表',that.visuForestCloudRYBO)
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+::v-deep .userInformation{
+  .border-box-content{
+    overflow: hidden;
+  }
+
+}
+</style>

.history/src/views/leader_20240716105202.vue

@@ -0,0 +1,700 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          @change="levelHasChanged"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.level" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 38vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            class="userInformation"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    levelHasChanged(val){
+      getRy(val).then(res => {
+      })
+    },
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+        console.log('当前林长列表',that.visuForestCloudRYBO)
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+::v-deep .userInformation{
+  .border-box-content{
+    overflow: hidden;
+  }
+
+}
+</style>

.history/src/views/leader_20240716105427.vue

@@ -0,0 +1,704 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          @change="levelHasChanged"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.level" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 38vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            class="userInformation"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'').then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    levelHasChanged(val){
+      getRy(val).then(res => {
+        this.visuForestCloudRYBO = res.data;
+        this.visuForestCloudRYBO.forEach(item=>{
+          this.zrs+=parseInt(item.number)
+        })
+        this.zxrs = 0;
+      })
+    },
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+::v-deep .userInformation{
+  .border-box-content{
+    overflow: hidden;
+  }
+
+}
+</style>

.history/src/views/leader_20240716110241.vue

@@ -0,0 +1,706 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          @change="levelHasChanged"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.level" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 38vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            class="userInformation"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+      currentLevel:null, //当前林长级别
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'',this.currentLevel).then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    levelHasChanged(val){
+      this.currentLevel = val
+      getRy(val).then(res => {
+        this.visuForestCloudRYBO = res.data;
+        this.visuForestCloudRYBO.forEach(item=>{
+          this.zrs+=parseInt(item.number)
+        })
+        this.zxrs = 0;
+      })
+    },
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name,this.currentLevel).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+::v-deep .userInformation{
+  .border-box-content{
+    overflow: hidden;
+  }
+
+}
+</style>

.history/src/views/leader_20240716132133.vue

@@ -0,0 +1,706 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          @change="levelHasChanged"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.level" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 31vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            class="userInformation"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 34vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+      currentLevel:null, //当前林长级别
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'',this.currentLevel).then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    levelHasChanged(val){
+      this.currentLevel = val
+      getRy(val).then(res => {
+        this.visuForestCloudRYBO = res.data;
+        this.visuForestCloudRYBO.forEach(item=>{
+          this.zrs+=parseInt(item.number)
+        })
+        this.zxrs = 0;
+      })
+    },
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name,this.currentLevel).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+::v-deep .userInformation{
+  .border-box-content{
+    overflow: hidden;
+  }
+
+}
+</style>

.history/src/views/leader_20240716132145.vue

@@ -0,0 +1,706 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          @change="levelHasChanged"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.level" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 38vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            class="userInformation"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 31vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+      currentLevel:null, //当前林长级别
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'',this.currentLevel).then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    levelHasChanged(val){
+      this.currentLevel = val
+      getRy(val).then(res => {
+        this.visuForestCloudRYBO = res.data;
+        this.visuForestCloudRYBO.forEach(item=>{
+          this.zrs+=parseInt(item.number)
+        })
+        this.zxrs = 0;
+      })
+    },
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name,this.currentLevel).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+::v-deep .userInformation{
+  .border-box-content{
+    overflow: hidden;
+  }
+
+}
+</style>

.history/src/views/leader_20240716132838.vue

@@ -0,0 +1,707 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          @change="levelHasChanged"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item.level" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 38vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            class="userInformation"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 31vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+      currentLevel:null, //当前林长级别
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'',this.currentLevel).then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    levelHasChanged(val){
+      this.currentLevel = val
+      getRy(val).then(res => {
+        this.visuForestCloudRYBO = res.data;
+        this.visuForestCloudRYBO.forEach(item=>{
+          this.zrs+=parseInt(item.number)
+        })
+        this.zxrs = 0;
+      })
+    },
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name,this.currentLevel).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+::v-deep .userInformation{
+  .border-box-content{
+    overflow: hidden;
+    height: 102%;
+  }
+
+}
+</style>

.history/src/views/leader_20240716134349.vue

@@ -0,0 +1,710 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          @change="levelHasChanged"
+          v-model="selectLevel"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 38vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            class="userInformation"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 31vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+      currentLevel:null, //当前林长级别
+      selectLevel:null,
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'',this.currentLevel).then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    levelHasChanged(val){
+      this.selectLevel = val.name
+      this.currentLevel = val.level
+      getRy(val).then(res => {
+        this.visuForestCloudRYBO = res.data;
+        this.visuForestCloudRYBO.forEach(item=>{
+          this.zrs+=parseInt(item.number)
+        })
+        this.zxrs = 0;
+      })
+    },
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name,this.currentLevel).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+::v-deep .userInformation{
+  .border-box-content{
+    overflow: hidden;
+    height: 102%;
+  }
+
+}
+</style>

.history/src/views/leader_20240716134411.vue

@@ -0,0 +1,711 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          @change="levelHasChanged"
+          v-model="selectLevel"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 38vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            class="userInformation"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 31vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+      currentLevel:null, //当前林长级别
+      selectLevel:null,
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'',this.currentLevel).then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    levelHasChanged(val){
+      debugger
+      this.selectLevel = val.name
+      this.currentLevel = val.level
+      getRy(val).then(res => {
+        this.visuForestCloudRYBO = res.data;
+        this.visuForestCloudRYBO.forEach(item=>{
+          this.zrs+=parseInt(item.number)
+        })
+        this.zxrs = 0;
+      })
+    },
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name,this.currentLevel).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+::v-deep .userInformation{
+  .border-box-content{
+    overflow: hidden;
+    height: 102%;
+  }
+
+}
+</style>

.history/src/views/leader_20240716134453.vue

@@ -0,0 +1,710 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          @change="levelHasChanged"
+          v-model="selectLevel"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 38vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            class="userInformation"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 31vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+      currentLevel:null, //当前林长级别
+      selectLevel:null,
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'',this.currentLevel).then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    levelHasChanged(val){
+      this.selectLevel = val.name
+      this.currentLevel = val.level
+      getRy(val).then(res => {
+        this.visuForestCloudRYBO = res.data;
+        this.visuForestCloudRYBO.forEach(item=>{
+          this.zrs+=parseInt(item.number)
+        })
+        this.zxrs = 0;
+      })
+    },
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name,this.currentLevel).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+::v-deep .userInformation{
+  .border-box-content{
+    overflow: hidden;
+    height: 102%;
+  }
+
+}
+</style>

.history/src/views/leader_20240716134546.vue

@@ -0,0 +1,710 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          @change="levelHasChanged"
+          v-model="selectLevel"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 38vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            class="userInformation"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 31vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}</h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                    <h5>{{ item.linPhone }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+      currentLevel:null, //当前林长级别
+      selectLevel:null,
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'',this.currentLevel).then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    levelHasChanged(val){
+      this.selectLevel = val.name
+      this.currentLevel = val.level
+      getRy(val.level).then(res => {
+        this.visuForestCloudRYBO = res.data;
+        this.visuForestCloudRYBO.forEach(item=>{
+          this.zrs+=parseInt(item.number)
+        })
+        this.zxrs = 0;
+      })
+    },
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name,this.currentLevel).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+::v-deep .userInformation{
+  .border-box-content{
+    overflow: hidden;
+    height: 102%;
+  }
+
+}
+</style>

.history/src/views/leader_20240716143101.vue

@@ -0,0 +1,709 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          @change="levelHasChanged"
+          v-model="selectLevel"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 38vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            class="userInformation"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 31vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}<span v-if="item.phone != linPhone"> - {{ item.linPhone }}</span></h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+      currentLevel:null, //当前林长级别
+      selectLevel:null,
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'',this.currentLevel).then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    levelHasChanged(val){
+      this.selectLevel = val.name
+      this.currentLevel = val.level
+      getRy(val.level).then(res => {
+        this.visuForestCloudRYBO = res.data;
+        this.visuForestCloudRYBO.forEach(item=>{
+          this.zrs+=parseInt(item.number)
+        })
+        this.zxrs = 0;
+      })
+    },
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name,this.currentLevel).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+::v-deep .userInformation{
+  .border-box-content{
+    overflow: hidden;
+    height: 102%;
+  }
+
+}
+</style>

.history/src/views/leader_20240716143135.vue

@@ -0,0 +1,709 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          @change="levelHasChanged"
+          v-model="selectLevel"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 38vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            class="userInformation"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 31vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}<span v-if="item.linPhone != undefined"> - {{ item.linPhone }}</span></h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+      currentLevel:null, //当前林长级别
+      selectLevel:null,
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'',this.currentLevel).then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    levelHasChanged(val){
+      this.selectLevel = val.name
+      this.currentLevel = val.level
+      getRy(val.level).then(res => {
+        this.visuForestCloudRYBO = res.data;
+        this.visuForestCloudRYBO.forEach(item=>{
+          this.zrs+=parseInt(item.number)
+        })
+        this.zxrs = 0;
+      })
+    },
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name,this.currentLevel).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+::v-deep .userInformation{
+  .border-box-content{
+    overflow: hidden;
+    height: 102%;
+  }
+
+}
+</style>

.history/src/views/leader_20240716143207.vue

@@ -0,0 +1,712 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          @change="levelHasChanged"
+          v-model="selectLevel"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 38vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            class="userInformation"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 31vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}<span v-if="item.linPhone != undefined"> - {{ item.linPhone }}</span></h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+      currentLevel:null, //当前林长级别
+      selectLevel:null,
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'',this.currentLevel).then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    levelHasChanged(val){
+      this.selectLevel = val.name
+      this.currentLevel = val.level
+      getRy(val.level).then(res => {
+        this.visuForestCloudRYBO = res.data;
+        this.visuForestCloudRYBO.forEach(item=>{
+          this.zrs+=parseInt(item.number)
+        })
+        this.zxrs = 0;
+      })
+    },
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name,this.currentLevel).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+::v-deep .userInformation{
+  .border-box-content{
+    overflow: hidden;
+    height: 102%;
+  }
+}
+.icon-text h5{
+  font-size: .8rem !important;
+  margin-top: 3%;
+}
+</style>

.history/src/views/leader_20240716161113.vue

@@ -0,0 +1,716 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          @change="levelHasChanged"
+          v-model="selectLevel"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 38vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            class="userInformation"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 31vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}<span v-if="item.linPhone != undefined"> - {{ item.linPhone }}</span></h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+      currentLevel:null, //当前林长级别
+      selectLevel:null,
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'',this.currentLevel).then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    levelHasChanged(val){
+      this.peopleList = [];
+      this.peopleList2 = [];
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      this.selectLevel = val.name
+      this.currentLevel = val.level
+      getRy(val.level).then(res => {
+        this.visuForestCloudRYBO = res.data;
+        this.visuForestCloudRYBO.forEach(item=>{
+          this.zrs+=parseInt(item.number)
+        })
+        this.zxrs = 0;
+      })
+    },
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name,this.currentLevel).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+::v-deep .userInformation{
+  .border-box-content{
+    overflow: hidden;
+    height: 102%;
+  }
+}
+.icon-text h5{
+  font-size: .8rem !important;
+  margin-top: 3%;
+}
+</style>

.history/src/views/leader_20240716161213.vue

@@ -0,0 +1,717 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <el-select 
+          class="select_level"
+          placeholder="请选择林长级别"
+          @change="levelHasChanged"
+          v-model="selectLevel"
+          >
+          <el-option 
+            v-for="item in numByLevelOptions" :key="item.key" :value="item" :label="item.name"
+            >
+          </el-option>
+        </el-select>
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem;height: 36vh;"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>人员分布</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-25 scrollBar">
+              <!-- <div id="personnel-chart" style="width: 100%; height: 12vh"></div> -->
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con w-50"
+                  :class="{ on: iconCurrentIndex1 == item.jobValue }"
+                  v-for="(item, index) in visuForestCloudRYBO"
+                  @click="getForestLeader(item.jobValue, item.jobType)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text">
+                    <h5>{{ item.job }}</h5>
+                    <h6>{{ item.number }}</h6>
+                  </div>
+                </div>
+                <!-- <div class="icon-con w-50  m-btm-no" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
+                <div class="icon icon-mid el-icon-user"></div>
+                <div class="icon-text">
+                  <h5>{{item.job}}</h5>
+                  <h6>{{item.number}}</h6>
+                </div>
+              </div> -->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+        <!--        avatar: ""-->
+        <!--        deptName: "锦程社区第一网格"-->
+        <!--        nickName: "李猛"-->
+        <!--        userId: 102-->
+        <!--        userName: "limeng"-->
+        <div class="forthis" style="height: 38vh;">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+            class="userInformation"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+			<div class="sj-search">
+                <el-input
+                  v-model="nickName"
+                  placeholder="请输入姓名"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  @change="getForestLeader(_,_,nickName)"
+                />
+              </div>
+            <div class="i-list-con" style="height: 31vh;">
+              <div class="d-l-con-icon">
+                <div
+                  class="icon-con"
+                  :class="{ on: listCurrentIndex1 == item.userId }"
+                  v-for="(item, index) in peopleList2"
+                  @click="getPlanList(item.userId)"
+                >
+                  <div class="icon icon-mid el-icon-user"></div>
+                  <div class="icon-text personnel-name" style="width: 300px;">
+                    <h6>{{ item.nickName }}<span v-if="item.linPhone != undefined"> - {{ item.linPhone }}</span></h6>
+                    <h5>{{ item.deptName }}-{{ item.linLabel }}</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod"></supermap>
+      <!-- 右侧 -->
+      <div class="rightbar" ref="right">
+        <div class="forthis">
+          <dv-border-box-13
+            backgroundColor="rgba(12, 19, 38, .90)"
+            style="padding-bottom: 1rem"
+          >
+            <img
+              src="../assets/images/integrated/light.png"
+              style="width: 100%; margin-top: 0.4rem"
+            />
+            <div class="this-title">
+              <span>巡林任务</span>
+              <dv-decoration-3
+                style="width: 150px; height: 15px; margin-right: 1rem"
+              />
+            </div>
+            <div class="i-list-con h-73">
+              <div class="h-73 overflow-y">
+                <el-collapse accordion>
+                  <el-collapse-item v-for="(item, index) in xunLinListOne">
+                    <template slot="title">
+                      <div
+                        class="d-l-con sj-collapse"
+                        @click="getRecordList(item.id, item.patrolTrajectory)"
+                      >
+                        <div class="d-l-l-text">
+                          <el-tooltip
+                            class="item"
+                            effect="dark"
+                            placement="left"
+                            style="width: 10rem"
+                            :disabled="
+                              item.taskName != null &&
+                              item.taskName.length <= 20
+                            "
+                          >
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px">
+                                {{ item.taskName }}
+                              </h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px">
+                              {{ item.taskName | ellipsis20 }}
+                            </h4>
+                          </el-tooltip>
+                        </div>
+                        <div class="d-l-l-count">
+                          ({{ item.recordCount }}/{{ item.planCount }})
+                        </div>
+                      </div>
+                    </template>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      @click="getPointList(child.id)"
+                      v-for="(child, index) in recordList"
+                    >
+                      <div class="d-l-l-text">
+                        <h4>{{ child.beginTime }} - {{ child.endTime }}</h4>
+                      </div>
+                      <!--<div class="d-l-l-count">{{index}}</div>-->
+                    </div>
+                    <div
+                      class="d-l-con this-child sj-collapse"
+                      v-if="
+                        showNothing &&
+                        (recordList == null ||
+                          recordList == '' ||
+                          recordList == [])
+                      "
+                    >
+                      <div class="d-l-l-text">
+                        <h4 class="text-gray">暂无信息</h4>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+                <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
+                     v-for="(item,index) in xunLinListOne"
+                     @click="setConnectList(item.planLine,item.planName)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.planName }}</h4>
+                  </div>
+                </div>-->
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
+  </div>
+</template>
+
+<script>
+import {
+  getForestLeader,
+  getPlanList,
+  getRecordList,
+  getPointList,
+  getRy,
+  getNumByLevel,
+  getlinleaderMap,
+} from "@/api/leader";
+
+import supermap from "@/components/supermap-2.5d"; //超图
+import vheader from "@/components/v-header.vue"; //一体化共用头部
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
+import TVWall from "@/components/TVWall.vue";
+import TVWalls from "@/components/TVWalls.vue";
+import {getUserProfile} from "@/api/system/user"; //电视墙弹窗
+
+let echarts = require("echarts");
+export default {
+  components: {
+    supermap,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    TVWalls,
+  },
+  data() {
+    return {
+      numByLevelOptions:[],
+      nickName: "",
+      currentName:null,
+      iconCurrentIndex1: null,
+      listCurrentIndex1: "",
+      listCurrentIndex2: "",
+      visuForestCloudRYBO: [], //人员类型列表
+      personId: null, //人员
+      peopleList: [], //人员列表
+      peopleList2: [], //人员列表
+      connectList: [], //画线
+      patrolTrajectory: null, //任务画线
+      xunLinListOne: [], //巡林任务
+      recordList: [], //巡查记录
+      showNothing: false, //暂无信息
+      zrs: 0, //总人数
+      zxrs: 0, //在线人数
+      currentLevel:null, //当前林长级别
+      selectLevel:null,
+    };
+  },
+  created() {
+    this.getInit();
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    getForestLeader(null , null,'',this.currentLevel).then((res) => {
+      this.peopleList = res.data;
+      this.peopleList2 = res.data;
+    });
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+
+    this.bottomMenuList(); //获取底部公共组件消息和任务
+    this.nickName = null
+  },
+  watch: {
+    nickName(val) {
+      this.peopleList2 = [];
+
+      for (let i in this.peopleList) {
+        if (this.peopleList[i].nickName.indexOf(val) != -1) {
+          this.peopleList2.push(this.peopleList[i]);
+        }
+      }
+      console.log(this.peopleList2);
+    },
+  },
+  methods: {
+    levelHasChanged(val){
+      this.peopleList = [];
+      this.peopleList2 = [];
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      this.selectLevel = val.name
+      this.currentLevel = val.level
+      getRy(val.level).then(res => {
+        this.visuForestCloudRYBO = res.data;
+        this.visuForestCloudRYBO.forEach(item=>{
+          this.zrs+=parseInt(item.number)
+        })
+        this.zxrs = 0;
+      })
+    },
+    fatherMethod(dianshiqiang, longitude, latitude, item) {
+      this.$refs.TVWalls.showTVWall(
+        dianshiqiang, {
+          longitude: longitude,
+          latitude: latitude,
+        },
+        item
+      );
+    },
+    //初始化地图数据
+    getSuperMapUrl(){
+      getUserProfile().then(response => {
+        let mapDeptId=response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    bottomMenuList() {
+      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
+      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+      this.$refs.bottomMenu.linBanTreeselect(); //查询林班层级树结构
+      this.$refs.bottomMenu.deptTreeselect(); //查询林场部门树结构
+    },
+    showDialog(click) {
+      if (click == "eventLocation") {
+        this.$refs.eventLocation.showEventLocation();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "editableLayers") {
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showMeasure) {
+          this.$refs.bottomMenu.showMeasure = true;
+        } else {
+          this.$refs.bottomMenu.showMeasure = false;
+        }
+      } else if (click == "layerSwitching") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showChild) {
+          this.$refs.bottomMenu.showChild = true;
+        } else {
+          this.$refs.bottomMenu.showChild = false;
+        }
+      } else if (click == "TVWall") {
+        this.$refs.TVWall.showTVWall();
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+      } else if (click == "forestban") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showChild = false;
+        this.$refs.bottomMenu.showChangChild = false;
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true;
+        } else {
+          this.$refs.bottomMenu.showBanChild = false;
+        }
+      } else if (click == "forestchang") {
+        this.$refs.bottomMenu.showMeasure = false;
+        this.$refs.bottomMenu.showBanChild = false;
+        this.$refs.bottomMenu.showChild = false;
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true;
+        } else {
+          this.$refs.bottomMenu.showChangChild = false;
+        }
+      }
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear);
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList);
+    },
+    //选择图层(传递数组)  带数据
+    choseLayerSwitchingList_Data(urlList) {
+      this.$refs.supermap.layerSwitchingList_Data(urlList);
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    //初始化
+    getInit() {
+      let that = this;
+      this.iconCurrentIndex1 = null;
+      this.listCurrentIndex1 = "";
+      this.listCurrentIndex2 = "";
+      //获取左侧菜单列表
+      getRy().then((res) => {
+        that.visuForestCloudRYBO = res.data;
+        // that.zrs = res.data.visuForestCloudRyZxBO.zrs;
+        that.visuForestCloudRYBO.forEach(item=>{
+          that.zrs+=parseInt(item.number)
+        })
+         that.zxrs = 0;
+        //  this.personnelChart();
+      });
+      // 查询林长级别
+    getNumByLevel().then(res => {
+      this.numByLevelOptions = res.data
+    })
+    },
+    //获取左侧人员列表
+    getForestLeader(linJob = null, linType = null,name = null) {
+      if(name != null){
+        let that = this;
+        this.currentName = name
+        that.listCurrentIndex2 = "";
+        that.peopleList = [];
+        that.peopleList2 = [];
+        getForestLeader(that.iconCurrentIndex1 , linType,name,this.currentLevel).then((res) => {
+          that.peopleList = res.data;
+          that.peopleList2 = res.data;
+        });
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      } else {
+        let that = this;
+        that.peopleList = [];
+        that.peopleList2 = [];
+        that.listCurrentIndex1 = "";
+        that.listCurrentIndex2 = "";
+        if(that.iconCurrentIndex1 == linJob){
+          that.iconCurrentIndex1 = null
+          getForestLeader(that.iconCurrentIndex1, linType,this.currentName,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        } else {
+          that.iconCurrentIndex1 = linJob;
+          getForestLeader(that.iconCurrentIndex1, linType,name,this.currentLevel).then((res) => {
+            that.peopleList = res.data;
+            that.peopleList2 = res.data;
+          });
+        }
+        that.connectList = [];
+        this.personId = null;
+        this.xunLinListOne = [];
+        this.patrolTrajectory = null;
+        that.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+      }
+
+    },
+    //点击左侧人员列表获取 巡林计划
+    getPlanList(personId) {
+      if (this.personId == personId) {
+        //当前人员已经被点击一次 不再重复加载
+        return;
+      }
+      this.personId = personId;
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      that.listCurrentIndex1 = personId;
+      getPlanList(personId).then((res) => {
+        console.log("点击左侧人员列表获取 巡林计划=", personId);
+        that.xunLinListOne = res.data;
+      });
+      getlinleaderMap(personId).then((res) => {
+        that.choseLayerSwitching(res.data, true);
+      });
+      this.patrolTrajectory = null;
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+    },
+    //点击右侧巡林计划获取 巡查记录
+    getRecordList(id, patrolTrajectory) {
+      let that = this;
+      that.showNothing = false;
+      that.recordList = [];
+      getRecordList(id, that.personId).then((res) => {
+        that.recordList = res.data;
+      });
+      that.$refs.supermap.clearC();
+      this.$refs.supermap.clearTwoC();
+      this.setTaskPointList(patrolTrajectory);
+    },
+    //点击右侧巡查记录获取 巡查轨迹
+    getPointList(id) {
+      let that = this;
+      getPointList(id).then((res) => {
+        // console.log("落点",res.data);
+        that.setPointList(res);
+      });
+    },
+    //点击巡查人员 巡查任务落点
+    setTaskPointList(patrolTrajectory) {
+      console.log("巡查任务落点", JSON.parse(patrolTrajectory));
+      if (this.patrolTrajectory == patrolTrajectory) {
+        this.patrolTrajectory = null;
+      } else {
+        this.patrolTrajectory = patrolTrajectory;
+        this.drawTaskPoint(this.patrolTrajectory);
+      }
+    },
+    // 巡查任务落点
+    drawTaskPoint(patrolTrajectory) {
+      let list = JSON.parse(patrolTrajectory);
+      let data = [];
+      for (var i = 0; i < list.length; i++) {
+        data.push(list[i].lng);
+        data.push(list[i].lat);
+      }
+      setTimeout(() => {
+        this.$refs.supermap.clearC();
+        this.$refs.supermap.clearTwoC();
+        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
+      }, 1000);
+    },
+    //点击巡查轨迹时段 巡查轨迹落点
+    setPointList(res) {
+      let that = this;
+      that.connectList = [];
+      console.log("落点", res.data);
+      if (res.data != null && res.data.length > 0) {
+        for (let i = 0; i < res.data.length; i++) {
+          that.connectList.push(res.data[i].longitude);
+          that.connectList.push(res.data[i].latitude);
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearTwoC();
+          that.$refs.supermap.setConnectTwoList(that.connectList, "#f40", 0.8);
+        }, 1000);
+      } else {
+        that.$refs.supermap.clearTwoC();
+      }
+    },
+    setConnectList(points, planName) {
+      this.listCurrentIndex2 = planName;
+      this.connectList = [];
+      if (points != null && points != "") {
+        this.connectList = JSON.parse(points);
+        this.$refs.supermap.setConnectTwoList(this.connectList, "red");
+      }
+    },
+
+    //人员chart
+    personnelChart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById("personnel-chart"));
+      // 绘制图表
+      const handred = this.zrs;
+      let point = this.zxrs;
+      myChart.setOption({
+        title: [
+          {
+            text: "总人数：" + handred + "人",
+            x: "48%",
+            y: "25%",
+            textStyle: {
+              fontWeight: "normal",
+              color: handred == 0 ? '#666' : "#02d6fc",
+              // color: "#02d6fc",
+              fontSize: "14",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "circle",
+            type: "pie",
+            center: ["22%", "50%"],
+            radius: ["60%", "70%"],
+            clockWise: true,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              {
+                value: handred,
+                name: "当前在线",
+                label: {
+                  show: true, //单独显示该数据项
+                  formatter: "{c}人",
+                  labelLayout: {
+                    top: "50%",
+                  },
+                  textStyle: {
+                    color: handred == 0 ? '#666' : "#02d6fc",
+                    fontSize: 14,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: handred == 0 ? '#666' :
+                    {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#02d6fc", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#367bec", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
+                  },
+                },
+              },
+              {
+                value: 0,
+                itemStyle: {
+                  color:'#666'
+                  // color: handred == 0 ? '#666' : "#02d6fc",
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  //过滤器
+
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return "";
+      if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "@/assets/styles/base.scss";
+
+.h-27 {
+  height: 27rem;
+}
+    .scrollBar{
+      width: 98% !important;
+      height: 31vh !important;
+      overflow-x: hidden !important;
+    }
+    .scrollBar::-webkit-scrollbar {
+      // display: block !important;
+      background-color: #101823;
+      border: 1px solid #fff;
+      width: 7px !important;
+    }
+    .scrollBar::-webkit-scrollbar-button {
+        background-color: #101823;
+    }
+    /* 滚动条上的滚动滑块 */
+    .scrollBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+    }
+::v-deep .select_level{
+    width: 97%;
+    margin: auto;
+}
+::v-deep .userInformation{
+  .border-box-content{
+    overflow: hidden;
+    height: 102%;
+  }
+}
+.icon-text h5{
+  font-size: .8rem !important;
+  margin-top: 3%;
+}
+</style>

README.md

@@ -0,0 +1,31 @@
+## 当前为（四平）开发分支
+# 开发（可视化林业）
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+
+# run unit tests
+npm run unit
+
+# run e2e tests
+npm run e2e
+
+# run all tests
+npm test
+```
+
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
+    '@vue/cli-plugin-babel/preset'
+  ],
+  'env': {
+    'development': {
+      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
+      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
+      'plugins': ['dynamic-import-node']
+    }
+  }
+}

bin/build.bat

@@ -0,0 +1,12 @@
+@echo off
+echo.
+echo [信息] 打包Web工程，生成dist文件。
+echo.
+
+%~d0
+cd %~dp0
+
+cd ..
+npm run build:prod
+
+pause

bin/package.bat

@@ -0,0 +1,12 @@
+@echo off
+echo.
+echo [信息] 安装Web工程，生成node_modules文件。
+echo.
+
+%~d0
+cd %~dp0
+
+cd ..
+npm install --registry=https://registry.npm.taobao.org
+
+pause

bin/run-web.bat

@@ -0,0 +1,12 @@
+@echo off
+echo.
+echo [信息] 使用 Vue CLI 命令运行 Web 工程。
+echo.
+
+%~d0
+cd %~dp0
+
+cd ..
+npm run dev
+
+pause

build/index.js

@@ -0,0 +1,35 @@
+const { run } = require('runjs')
+const chalk = require('chalk')
+const config = require('../vue.config.js')
+const rawArgv = process.argv.slice(2)
+const args = rawArgv.join(' ')
+
+if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
+  const report = rawArgv.includes('--report')
+
+  run(`vue-cli-service build ${args}`)
+
+  const port = 9526
+  const publicPath = config.publicPath
+
+  var connect = require('connect')
+  var serveStatic = require('serve-static')
+  const app = connect()
+
+  app.use(
+    publicPath,
+    serveStatic('./dist', {
+      index: ['index.html', '/']
+    })
+  )
+
+  app.listen(port, function () {
+    console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
+    if (report) {
+      console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
+    }
+
+  })
+} else {
+  run(`vue-cli-service build ${args}`)
+}

package.json

@@ -0,0 +1,99 @@
+{
+  "name": "ruoyi",
+  "version": "3.4.0",
+  "description": "四平市态势感知平台",
+  "author": "若依",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "build:prod": "vue-cli-service build",
+    "build:stage": "vue-cli-service build --mode staging",
+    "preview": "node build/index.js --preview",
+    "lint": "eslint --ext .js,.vue src"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,vue}": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "keywords": [
+    "vue",
+    "admin",
+    "dashboard",
+    "element-ui",
+    "boilerplate",
+    "admin-template",
+    "management-system"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/y_project/RuoYi-Cloud.git"
+  },
+  "dependencies": {
+    "@jiaminghi/data-view": "^2.10.0",
+    "@riophae/vue-treeselect": "0.4.0",
+    "@vue/babel-plugin-transform-vue-jsx": "^1.2.1",
+    "animate.css": "^4.1.1",
+    "axios": "0.24.0",
+    "clipboard": "2.0.8",
+    "core-js": "3.19.1",
+    "echarts": "^4.9.0",
+    "element-ui": "2.15.6",
+    "file-saver": "2.0.5",
+    "fuse.js": "6.4.3",
+    "highlight.js": "9.18.5",
+    "html2canvas": "^1.4.1",
+    "js-beautify": "1.13.0",
+    "js-cookie": "3.0.1",
+    "jsencrypt": "^3.2.1",
+    "lib-flexible": "^0.3.2",
+    "node": "^16.20.1",
+    "nprogress": "0.2.0",
+    "quill": "1.3.7",
+    "screenfull": "5.0.2",
+    "sortablejs": "1.10.2",
+    "vue": "2.6.12",
+    "vue-cookies": "^1.8.2",
+    "vue-count-to": "1.0.13",
+    "vue-cropper": "0.5.5",
+    "vue-meta": "2.4.0",
+    "vue-meta-info": "^0.1.7",
+    "vue-router": "3.4.9",
+    "vuedraggable": "2.24.3",
+    "vuex": "3.6.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "4.4.6",
+    "@vue/cli-plugin-eslint": "4.4.6",
+    "@vue/cli-service": "4.4.6",
+    "babel-eslint": "10.1.0",
+    "babel-plugin-dynamic-import-node": "2.3.3",
+    "chalk": "4.1.0",
+    "compression-webpack-plugin": "5.0.2",
+    "connect": "3.6.6",
+    "eslint": "7.15.0",
+    "eslint-plugin-vue": "7.2.0",
+    "lint-staged": "10.5.3",
+    "px2rem-loader": "^0.1.9",
+    "runjs": "4.4.2",
+    "sass": "1.32.13",
+    "sass-loader": "10.1.1",
+    "script-ext-html-webpack-plugin": "2.1.5",
+    "svg-sprite-loader": "5.1.1",
+    "vue-template-compiler": "2.6.12"
+  },
+  "engines": {
+    "node": ">=8.9",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}