From c39d263b3cc2e3dc24b5fc02f3e6a02366509bce Mon Sep 17 00:00:00 2001
From: humiao <123456>
Date: Thu, 21 Sep 2023 09:18:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E7=82=B9=E5=87=BB=E6=9F=A5?=
 =?UTF-8?q?=E7=9C=8B=E6=A0=87=E7=82=B9=E4=BF=A1=E6=81=AF=20=E5=8F=B3?=
 =?UTF-8?q?=E9=94=AE=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/gridman/forestranger/index.vue      | 1077 +++++++++--------
 .../gridman/forestranger/widget/ditu.vue      |   31 +-
 2 files changed, 604 insertions(+), 504 deletions(-)

diff --git a/src/views/gridman/forestranger/index.vue b/src/views/gridman/forestranger/index.vue
index c3ca511..e733851 100644
--- a/src/views/gridman/forestranger/index.vue
+++ b/src/views/gridman/forestranger/index.vue
@@ -1,622 +1,715 @@
 <template>
   <div class="site-content">
-
     <sticky :className="'sub-navbar'">
       <div class="filter-container">
-
-        <el-input @keyup.enter.native="handleFilter" size="mini" prefix-icon="el-icon-search"
-          style="width: 200px;margin-bottom: 0;margin:0px 12px;" class="filter-item" :placeholder="'名称'"
-          v-model="listQuery.name">
+        <el-input
+          @keyup.enter.native="handleFilter"
+          size="mini"
+          prefix-icon="el-icon-search"
+          style="width: 200px; margin-bottom: 0; margin: 0px 12px"
+          class="filter-item"
+          :placeholder="'名称'"
+          v-model="listQuery.name"
+        >
         </el-input>
 
-        <el-button type="primary" size="mini" @click="getList()">查询</el-button>
+        <el-button type="primary" size="mini" @click="getList()"
+          >查询</el-button
+        >
         <!-- <el-button type="primary" size="mini" @click="add()">添加</el-button> -->
         <el-button type="warning" size="mini" @click="react()">编辑</el-button>
         <el-button type="danger" size="mini" @click="del()">删除</el-button>
 
-        <permission-btn moduleName='modulemanager' :size="'mini'" v-on:btn-event="onBtnClicked"></permission-btn>
-
+        <permission-btn
+          moduleName="modulemanager"
+          :size="'mini'"
+          v-on:btn-event="onBtnClicked"
+        ></permission-btn>
       </div>
     </sticky>
     <div class="app-container flex-item">
       <div class="fh">
-        <div class="flex jc-sb" style="height:calc(100% - 60px)">
-          <div class="mr-1 max-h" style="width:500px">
-            <el-table ref="mainTable" :key='tableKey' :data="tableData" v-loading="listLoading" border fit
-              highlight-current-row style="width: 100%;" height="100%" @row-click="rowClick"
-              @selection-change="handleSelectionChange">
+        <div class="flex jc-sb" style="height: calc(100% - 60px)">
+          <div class="mr-1 max-h" style="width: 500px">
+            <el-table
+              ref="mainTable"
+              :key="tableKey"
+              :data="tableData"
+              v-loading="listLoading"
+              border
+              fit
+              highlight-current-row
+              style="width: 100%"
+              height="100%"
+              @row-click="rowClick"
+              @selection-change="handleSelectionChange"
+            >
               <el-table-column type="selection" align="center" width="55">
               </el-table-column>
-              <el-table-column prop="Account" label="账号" show-overflow-tooltip align="center">
+              <el-table-column
+                prop="Account"
+                label="账号"
+                show-overflow-tooltip
+                align="center"
+              >
               </el-table-column>
-              <el-table-column prop="Name" label="姓名" show-overflow-tooltip align="center">
+              <el-table-column
+                prop="Name"
+                label="姓名"
+                show-overflow-tooltip
+                align="center"
+              >
               </el-table-column>
-              <el-table-column  label="性别" show-overflow-tooltip align="center">
+              <el-table-column
+                label="性别"
+                show-overflow-tooltip
+                align="center"
+              >
                 <template slot-scope="scope">
-                {{scope.row.Sex == 0 ? '男' : '女'}}
+                  {{ scope.row.Sex == 0 ? "男" : "女" }}
                 </template>
               </el-table-column>
-            
             </el-table>
           </div>
-          <div class="mr-1" style="background: rgba(0, 9, 34, 0.6);width:350px;">
-            <div style="height:40px;align-items:baseline" class="flex">
-              <el-input @keyup.enter.native="handleFilter" size="mini" prefix-icon="el-icon-search"
-                style="width: 150px;margin-bottom: 0;margin:0px 12px;" class="filter-item" :placeholder="'打卡点名称'"
-                v-model="clockInName">
+          <div
+            class="mr-1"
+            style="background: rgba(0, 9, 34, 0.6); width: 350px"
+          >
+            <div style="height: 40px; align-items: baseline" class="flex">
+              <el-input
+                @keyup.enter.native="handleFilter"
+                size="mini"
+                prefix-icon="el-icon-search"
+                style="width: 150px; margin-bottom: 0; margin: 0px 12px"
+                class="filter-item"
+                :placeholder="'打卡点名称'"
+                v-model="clockInName"
+              >
               </el-input>
-              <el-button type="primary" size="mini" @click="getClockInList()">搜索</el-button>
+              <el-button type="primary" size="mini" @click="getClockInList()"
+                >搜索</el-button
+              >
             </div>
             <div class="forestlistbox">
-              <div class="forestUl cursor" v-for="(item,index) in clockInList" :key="index" @click="gofly(item)">
+              <div
+                class="forestUl cursor"
+                v-for="(item, index) in clockInList"
+                :key="index"
+                @click="gofly(item)"
+              >
                 <div class="flex max-h jc-sb ai-c">
                   <div class="flex-1 fc-w fz-16">
                     <div>{{ item.pointname }}</div>
                     <div class="fz-14 mt-1">责任人：{{ item.usernames }}</div>
                   </div>
-                  <div class="flex column jc-c ai-c" style="height:70px">
+                  <div class="flex column jc-c ai-c" style="height: 70px">
                     <span>
-                      <el-button type="danger" size="mini" @click.stop="delItem(item)">删除</el-button>
+                      <el-button
+                        type="danger"
+                        size="mini"
+                        @click.stop="delItem(item)"
+                        >删除</el-button
+                      >
                     </span>
-                    <el-button type="success" class="mt-1" size="mini" @click.stop="editClock(item)">编辑</el-button>
+                    <el-button
+                      type="success"
+                      class="mt-1"
+                      size="mini"
+                      @click.stop="editClock(item)"
+                      >编辑</el-button
+                    >
                   </div>
                 </div>
               </div>
             </div>
           </div>
-          <div class="flex-1 max-w" style="position: relative;overflow: hidden;">
-            <DItu class="max-w" :rowkey="rowdataKey" :lnglat="clocklnglat" :flyCenter="flyCenter" ref="dituevent" @getLocation="getLocation"></DItu>
+          <div
+            class="flex-1 max-w"
+            style="position: relative; overflow: hidden"
+          >
+            <DItu
+              class="max-w"
+              :rowkey="rowdataKey"
+              :lnglat="clocklnglat"
+              :flyCenter="flyCenter"
+              ref="dituevent"
+              @rightClick="rightClick"
+            ></DItu>
           </div>
         </div>
-        
-        <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize"
-          @pagination="handleCurrentChange" />
+
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="listQuery.pageIndex"
+          :limit.sync="listQuery.pageSize"
+          @pagination="handleCurrentChange"
+        />
       </div>
     </div>
 
-    <el-dialog width="40%" height="60%" top=" calc(50vh - 340px)" class="dialog-mini body-small addWindow"
-      v-el-drag-dialog :title="titleStr" :close-on-click-modal="false" :close-on-press-escape="false"
-      :visible.sync="addServiceVisible">
-          <AddForm v-if="addServiceVisible" @addSuccess="addSuccess" :detailInfo="detailInfo" @close="addServiceVisible = false"></AddForm>
+    <el-dialog
+      width="40%"
+      height="60%"
+      top=" calc(50vh - 340px)"
+      class="dialog-mini body-small addWindow"
+      v-el-drag-dialog
+      :title="titleStr"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :visible.sync="addServiceVisible"
+    >
+      <AddForm
+        v-if="addServiceVisible"
+        @addSuccess="addSuccess"
+        :detailInfo="detailInfo"
+        @close="addServiceVisible = false"
+      ></AddForm>
     </el-dialog>
     <!-- 添加打卡 -->
-    <el-dialog width="40%" height="60%" top=" calc(50vh - 340px)" class="dialog-mini"
-      v-el-drag-dialog title="打卡" :close-on-click-modal="false" :close-on-press-escape="false"
-      :visible.sync="clockInVisible ">
-          <clockInDia :lnglat="clocklnglat" :clockdata="clockDetail" @clockInSuccess="clockInSuccess" @close="clockInVisible = false" v-if="clockInVisible"></clockInDia>
+    <el-dialog
+      width="40%"
+      height="60%"
+      top=" calc(50vh - 340px)"
+      class="dialog-mini"
+      v-el-drag-dialog
+      title="打卡"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :visible.sync="clockInVisible"
+    >
+      <clockInDia
+        :lnglat="clocklnglat"
+        :clockdata="clockDetail"
+        @clockInSuccess="clockInSuccess"
+        @close="clockInVisible = false"
+        v-if="clockInVisible"
+      ></clockInDia>
     </el-dialog>
-
   </div>
-
-
 </template>
 
 <script>
-  import DItu from "./widget/ditu.vue";
-  import AppConfigInfo from '/public/config/app.json'
-  import Pagination from '@/components/Pagination'
-  import { listToTreeSelect } from '@/utils'
-  import extend from "@/extensions/delRows.js"
-  import * as modules from '@/api/modules'
-  import * as login from '@/api/login'
-  import Treeselect from '@riophae/vue-treeselect'
-  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-  import waves from '@/directive/waves' // 水波纹指令
-  import permissionBtn from '@/components/PermissionBtn'
-  import elDragDialog from '@/directive/el-dragDialog'
-  import iconData from '@/assets/public/css/comIconfont/iconfont/iconfont.json'
-  import { getMethodCommon, postMethodCommon } from "@/api/common";
-  import AddForm from './widget/AddForm';
-  import clockInDia from './widget/clockIn';
-  import Sticky from '@/components/Sticky'
+import DItu from "./widget/ditu.vue";
+import AppConfigInfo from "/public/config/app.json";
+import Pagination from "@/components/Pagination";
+import { listToTreeSelect } from "@/utils";
+import extend from "@/extensions/delRows.js";
+import * as modules from "@/api/modules";
+import * as login from "@/api/login";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import waves from "@/directive/waves"; // 水波纹指令
+import permissionBtn from "@/components/PermissionBtn";
+import elDragDialog from "@/directive/el-dragDialog";
+import iconData from "@/assets/public/css/comIconfont/iconfont/iconfont.json";
+import { getMethodCommon, postMethodCommon } from "@/api/common";
+import AddForm from "./widget/AddForm";
+import clockInDia from "./widget/clockIn";
+import Sticky from "@/components/Sticky";
 
-  export default {
-    name: 'module',
-    components: {
-      permissionBtn,
-      Pagination,
-      AddForm,
-      Sticky,
-      DItu,
-      clockInDia
-    },
-    mixins: [extend],
-    directives: {
-      waves,
-      elDragDialog
-    },
-    data() {
-      return {
-        rowdata: {},
-        tableKey: 0,
-        titleStr: '添加',
-        tableData: [],
-        addServiceVisible: false,
-        total: 0,
-        listQuery: {
-          // 查询条件
-          pageIndex: 1,
-          pageSize: 20,
-          name: null,
-        },
-        detailInfo:[],
-        clocklnglat: '',
-        clockInList:[],
-        clockInName: '',
-        clockInVisible: false,
-        rowdataKey: 1,
-        flyCenter:[],
-        clockDetail:{}
-
-      }
-    },
-    computed: {
-
-    },
-    filters: {
-
-    },
-    created() {
-      this.getList()
-      this.getClockInList()
-    },
-    mounted() {
-
-    },
-    methods: {
-      getLocation(e){
-        console.log('getLocation',e)
-        this.clockInVisible = true
-        this.clocklnglat = e
-        this.clockDetail = null
+export default {
+  name: "module",
+  components: {
+    permissionBtn,
+    Pagination,
+    AddForm,
+    Sticky,
+    DItu,
+    clockInDia,
+  },
+  mixins: [extend],
+  directives: {
+    waves,
+    elDragDialog,
+  },
+  data() {
+    return {
+      rowdata: {},
+      tableKey: 0,
+      titleStr: "添加",
+      tableData: [],
+      addServiceVisible: false,
+      total: 0,
+      listQuery: {
+        // 查询条件
+        pageIndex: 1,
+        pageSize: 20,
+        name: null,
       },
-      editClock(e){
-        console.log('223311',e)
-        this.clockDetail = e
-        this.clockInVisible = true
-      },
-      gofly(item){
-        console.log('iii',item)
-        this.flyCenter = [item.lng,item.lat]
-      },
-      delItem(item){
-        console.log('123',item)
-        let param = {
-          id: item.id
-        }
-        this.$confirm('确定删除本条数据?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          postMethodCommon("/FireGrid/DeleteCheckPoint?id="+param.id).then(res => {
-            if (res.code == 200) {
-              this.$message({
-                type: "success",
-                message: "删除成功",
-              })
+      detailInfo: [],
+      clocklnglat: "",
+      clockInList: [],
+      clockInName: "",
+      clockInVisible: false,
+      rowdataKey: 1,
+      flyCenter: [],
+      clockDetail: {},
+    };
+  },
+  computed: {},
+  filters: {},
+  created() {
+    this.getList();
+    this.getClockInList();
+  },
+  mounted() {},
+  methods: {
+    rightClick(e) {
+      console.log("rightClick", e);
+      this.clockInVisible = true;
+      this.clocklnglat = e;
+      this.clockDetail = null;
+    },
+    editClock(e) {
+      console.log("223311", e);
+      this.clockDetail = e;
+      this.clockInVisible = true;
+    },
+    gofly(item) {
+      console.log("iii", item);
+      this.flyCenter = [item.lng, item.lat];
+    },
+    delItem(item) {
+      console.log("123", item);
+      let param = {
+        id: item.id,
+      };
+      this.$confirm("确定删除本条数据?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          postMethodCommon("/FireGrid/DeleteCheckPoint?id=" + param.id).then(
+            (res) => {
+              if (res.code == 200) {
+                this.$message({
+                  type: "success",
+                  message: "删除成功",
+                });
+              }
+              this.rowdataKey++;
+              this.getClockInList();
             }
-            this.rowdataKey++
-            this.getClockInList()
-          })
-        }).catch(() => {
+          );
+        })
+        .catch(() => {
           this.$message({
-            type: 'info',
-            message: '已取消删除'
+            type: "info",
+            message: "已取消删除",
           });
         });
-       
-      },
-      clockInSuccess(){
-        console.log('231321')
-        this.rowdataKey++
-        this.getClockInList()
-      },
-      getClockInList(){
-        let param = {
-          name: this.clockInName
-        }
-        getMethodCommon("/FireGrid/GetTotalCheckPoint",param).then(res =>{
-          this.clockInList = res.result
-        })
-      },
-      add() {
-        this.addServiceVisible = true;
-        this.detailInfo=[]
-        this.titleStr = '添加'
-      },
-      addSuccess() {
-        this.addServiceVisible = false;
-        this.getList();
-      },
-      del() {
-        var _this = this
-        if(this.multipleSelection.length != 1){
-          this.$message({
-            type: 'info',
-            message: '请选择一条数据进行删除'
-          });
-          return;
-        }
-        this.$confirm('确定删除所选数据?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          postMethodCommon("/FireCodeApp/DeleteForestryUser?Id=" + _this.multipleSelection[0].id, {}).then(res => {
+    },
+    clockInSuccess() {
+      console.log("231321");
+      this.rowdataKey++;
+      this.getClockInList();
+    },
+    getClockInList() {
+      let param = {
+        name: this.clockInName,
+      };
+      getMethodCommon("/FireGrid/GetTotalCheckPoint", param).then((res) => {
+        this.clockInList = res.result;
+      });
+    },
+    add() {
+      this.addServiceVisible = true;
+      this.detailInfo = [];
+      this.titleStr = "添加";
+    },
+    addSuccess() {
+      this.addServiceVisible = false;
+      this.getList();
+    },
+    del() {
+      var _this = this;
+      if (this.multipleSelection.length != 1) {
+        this.$message({
+          type: "info",
+          message: "请选择一条数据进行删除",
+        });
+        return;
+      }
+      this.$confirm("确定删除所选数据?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          postMethodCommon(
+            "/FireCodeApp/DeleteForestryUser?Id=" +
+              _this.multipleSelection[0].id,
+            {}
+          ).then((res) => {
             if (res.code == 200) {
               this.$message({
                 type: "success",
                 message: "删除成功",
-              })
+              });
             }
             _this.getList();
-          })
-        }).catch(() => {
+          });
+        })
+        .catch(() => {
           this.$message({
-            type: 'info',
-            message: '已取消删除'
+            type: "info",
+            message: "已取消删除",
           });
         });
-
-      },
-      react() {
-        if(this.multipleSelection.length != 1){
-          this.$message({
-            type: 'info',
-            message: '请选择一条数据进行编辑'
-          });
-          return;
-        }
-        this.detailInfo = this.multipleSelection
-        this.addServiceVisible = true;
-        this.titleStr = '编辑'
-      },
-      rowClick(row) {
-        this.$refs.mainTable.clearSelection()
-        this.$refs.mainTable.toggleRowSelection(row)
-      },
-      handleSelectionChange(val) {
-        this.multipleSelection = val
-      },
-      onBtnClicked: function (domId) {
-        console.log('you click:' + domId)
-        switch (domId) {
-          case 'btnAdd':
-            this.addServiceVisible = true;
-            break
-          case 'btnEdit':
-            if (this.multipleSelection.length != 1) {
-              this.$message({
-                message: '只能选中一个进行编辑',
-                type: 'error'
-              })
-              return
-            }
-            this.handleUpdate()
-            break
-          case 'btnDel':
-            if (this.multipleSelection.length < 1) {
-              this.$message({
-                message: '至少删除一个',
-                type: 'error'
-              })
-              return
-            }
-            this.handleDelete()
-            break
-          case 'btnAddMenu':
-            this.handleAddMenu()
-            break
-          case 'btnEditMenu':
-            if (this.selectMenus.length !== 1) {
-              this.$message({
-                message: '只能选中一个进行编辑',
-                type: 'error'
-              })
-              return
-            }
-            this.handleEditMenu(this.selectMenus[0])
-            break
-          case 'btnDelMenu':
-            if (this.selectMenus.length < 1) {
-              this.$message({
-                message: '至少删除一个',
-                type: 'error'
-              })
-              return
-            }
-            this.handleDelMenus(this.selectMenus)
-            break
-          default:
-            break
-        }
-      },
-      getList() {
-        this.listLoading = true
-        getMethodCommon("/FireCodeApp/GetForestryUser", this.listQuery).then(res => {
-          if (res.code == 200) {
-            console.log(res)
-            this.tableData = res.data
-           
-            this.total = res.count
-            this.listLoading = false
+    },
+    react() {
+      if (this.multipleSelection.length != 1) {
+        this.$message({
+          type: "info",
+          message: "请选择一条数据进行编辑",
+        });
+        return;
+      }
+      this.detailInfo = this.multipleSelection;
+      this.addServiceVisible = true;
+      this.titleStr = "编辑";
+    },
+    rowClick(row) {
+      this.$refs.mainTable.clearSelection();
+      this.$refs.mainTable.toggleRowSelection(row);
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    onBtnClicked: function (domId) {
+      console.log("you click:" + domId);
+      switch (domId) {
+        case "btnAdd":
+          this.addServiceVisible = true;
+          break;
+        case "btnEdit":
+          if (this.multipleSelection.length != 1) {
+            this.$message({
+              message: "只能选中一个进行编辑",
+              type: "error",
+            });
+            return;
           }
-        })
-      },
-      handleFilter() {
-        this.listQuery.pageIndex = 1
-        this.getList()
-      },
-      handleSizeChange(val) {
-        this.listQuery.pageSize = val
-        this.getList()
-      },
-      handleCurrentChange(val) {
-        this.listQuery.pageIndex = val.page
-        this.listQuery.pageSize = val.limit
-        this.getList()
-      },
+          this.handleUpdate();
+          break;
+        case "btnDel":
+          if (this.multipleSelection.length < 1) {
+            this.$message({
+              message: "至少删除一个",
+              type: "error",
+            });
+            return;
+          }
+          this.handleDelete();
+          break;
+        case "btnAddMenu":
+          this.handleAddMenu();
+          break;
+        case "btnEditMenu":
+          if (this.selectMenus.length !== 1) {
+            this.$message({
+              message: "只能选中一个进行编辑",
+              type: "error",
+            });
+            return;
+          }
+          this.handleEditMenu(this.selectMenus[0]);
+          break;
+        case "btnDelMenu":
+          if (this.selectMenus.length < 1) {
+            this.$message({
+              message: "至少删除一个",
+              type: "error",
+            });
+            return;
+          }
+          this.handleDelMenus(this.selectMenus);
+          break;
+        default:
+          break;
+      }
+    },
+    getList() {
+      this.listLoading = true;
+      getMethodCommon("/FireCodeApp/GetForestryUser", this.listQuery).then(
+        (res) => {
+          if (res.code == 200) {
+            console.log(res);
+            this.tableData = res.data;
 
+            this.total = res.count;
+            this.listLoading = false;
+          }
+        }
+      );
+    },
+    handleFilter() {
+      this.listQuery.pageIndex = 1;
+      this.getList();
+    },
+    handleSizeChange(val) {
+      this.listQuery.pageSize = val;
+      this.getList();
+    },
+    handleCurrentChange(val) {
+      this.listQuery.pageIndex = val.page;
+      this.listQuery.pageSize = val.limit;
+      this.getList();
+    },
 
-      handleUpdate() {
-        this.editForm = this.multipleSelection[0];
-        this.editServiceVisible = true;
-      },
-
-
-    }
-  }
+    handleUpdate() {
+      this.editForm = this.multipleSelection[0];
+      this.editServiceVisible = true;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-   .el-table {
-    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
-      width: 10px;
-      /*滚动条宽度*/
-      height: 10px;
-      /*滚动条高度*/
-    }
-
-    /*定义滚动条轨道 内阴影+圆角*/
-    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
-      box-shadow: 0px 1px 3px #071e4a inset;
-      /*滚动条的背景区域的内阴影*/
-      border-radius: 10px;
-      /*滚动条的背景区域的圆角*/
-      background-color: rgba(0, 9, 34, 1);
-      /*滚动条的背景颜色*/
-    }
-
-    /*定义滑块 内阴影+圆角*/
-    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
-      box-shadow: 0px 1px 3px #00a0e9 inset;
-      /*滚动条的内阴影*/
-      border-radius: 10px;
-      /*滚动条的圆角*/
-      background-color: rgba(0, 9, 34, 1);
-
-      /*滚动条的背景颜色*/
-    }
-  }
-  ::v-deep .el-pagination__jump{
-    color: #fff;
-  }
-  ::v-deep .sticky {
-    background: rgba(0, 9, 34, 0.6);
+.el-table {
+  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+    width: 10px;
+    /*滚动条宽度*/
+    height: 10px;
+    /*滚动条高度*/
   }
 
-  ::v-deep .dialog-mini .el-dialog__header {
-    background: rgba(10, 39, 78, 1);
+  /*定义滚动条轨道 内阴影+圆角*/
+  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
+    box-shadow: 0px 1px 3px #071e4a inset;
+    /*滚动条的背景区域的内阴影*/
+    border-radius: 10px;
+    /*滚动条的背景区域的圆角*/
+    background-color: rgba(0, 9, 34, 1);
+    /*滚动条的背景颜色*/
   }
 
-  ::v-deep .dialog-mini .el-dialog__header .el-dialog__title {
-    color: #fff;
+  /*定义滑块 内阴影+圆角*/
+  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
+    box-shadow: 0px 1px 3px #00a0e9 inset;
+    /*滚动条的内阴影*/
+    border-radius: 10px;
+    /*滚动条的圆角*/
+    background-color: rgba(0, 9, 34, 1);
 
+    /*滚动条的背景颜色*/
   }
+}
+::v-deep .el-pagination__jump {
+  color: #fff;
+}
+::v-deep .sticky {
+  background: rgba(0, 9, 34, 0.6);
+}
 
-  ::v-deep .el-descriptions__body {
-    background: rgba(0, 9, 34, 1);
-    color: #fff;
-  }
+::v-deep .dialog-mini .el-dialog__header {
+  background: rgba(10, 39, 78, 1);
+}
 
-  ::v-deep .el-descriptions-item__label.is-bordered-label {
-    background: rgba(0, 9, 34, 0.6);
-    color: #fff;
-  }
+::v-deep .dialog-mini .el-dialog__header .el-dialog__title {
+  color: #fff;
+}
 
+::v-deep .el-descriptions__body {
+  background: rgba(0, 9, 34, 1);
+  color: #fff;
+}
 
+::v-deep .el-descriptions-item__label.is-bordered-label {
+  background: rgba(0, 9, 34, 0.6);
+  color: #fff;
+}
 
-  ::v-deep .el-dialog {
-    background: rgba(10, 39, 78, 1);
+::v-deep .el-dialog {
+  background: rgba(10, 39, 78, 1);
+}
 
-  }
+::v-deep .el-loading-mask {
+  background: rgba(0, 9, 34, 0.9);
+}
 
-  ::v-deep .el-loading-mask {
-    background: rgba(0, 9, 34, 0.9);
+.filter-container {
+  text-align: right;
+}
 
-  }
+.site-container {
+  width: 100%;
+  height: 100%;
+  background-image: url(/img/gridman/bg.png);
+  background-size: 100% 100%;
+}
 
-  .filter-container {
-    text-align: right;
-  }
+.site-header {
+  width: 100%;
+  height: 99px;
+  background-image: url(/img/gridman/header.png);
+  background-size: 100% 100%;
+  text-align: center;
+  color: #fff;
+  line-height: 90px;
+  font-size: 36px;
+  letter-spacing: 5px;
+}
 
-  .site-container {
-    width: 100%;
-    height: 100%;
-    background-image: url(/img/gridman/bg.png);
-    background-size: 100% 100%;
-  }
+.header-btn {
+  width: 100px;
+  height: 50px;
+  position: absolute;
+  top: 4%;
+  left: 2%;
+}
 
-  .site-header {
-    width: 100%;
-    height: 99px;
-    background-image: url(/img/gridman/header.png);
-    background-size: 100% 100%;
-    text-align: center;
-    color: #fff;
-    line-height: 90px;
-    font-size: 36px;
-    letter-spacing: 5px;
-  }
+.site-content {
+  width: 100%;
+  height: 94%;
+  background: rgba(0, 9, 34, 0.6);
+}
 
-  .header-btn {
-    width: 100px;
-    height: 50px;
-    position: absolute;
-    top: 4%;
-    left: 2%;
-  }
+.app-container {
+  height: 100%;
+  background: rgba(0, 9, 34, 0.6);
+}
 
-  .site-content {
-    width: 100%;
-    height: 94%;
-    background: rgba(0, 9, 34, 0.6);
-  }
+::v-deep .el-table {
+  background: rgba(0, 9, 34, 0.6);
+  border-left: 1px solid #00ede8;
+}
 
-  .app-container {
-    height: 100%;
-    background: rgba(0, 9, 34, 0.6);
-  }
+::v-deep .el-table .el-table__body tr:hover td {
+  background: rgba(24, 77, 143, 0.4) !important;
+  cursor: pointer;
+}
 
-  ::v-deep .el-table {
-    background: rgba(0, 9, 34, 0.6);
-    border-left: 1px solid #00EDE8;
-  }
+::v-deep .el-table .el-table__body tr.current-row td {
+  cursor: pointer;
+  background: rgba(24, 77, 143, 0.4) !important;
+}
 
-  ::v-deep .el-table .el-table__body tr:hover td {
-    background: rgba(24, 77, 143, 0.4) !important;
-    cursor: pointer;
-  }
+::v-deep .el-table tr {
+  background: rgba(0, 9, 34, 0.6);
+  border: none;
+  color: #fff;
+}
 
-  ::v-deep .el-table .el-table__body tr.current-row td {
-    cursor: pointer;
-    background: rgba(24, 77, 143, 0.4) !important;
-  }
+::v-deep .el-table th.el-table__cell {
+  background: rgba(0, 9, 34, 0.6);
+  color: #fff;
+  border: 1px solid #00ede8;
+}
 
-  ::v-deep .el-table tr {
-    background: rgba(0, 9, 34, 0.6);
-    border: none;
-    color: #fff;
+::v-deep .el-pagination__total,
+.el-pagination__jump {
+  color: #fff;
+}
 
-  }
+::v-deep .el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+  border-bottom: 1px solid #00ede8;
+}
 
-  ::v-deep .el-table th.el-table__cell {
-    background: rgba(0, 9, 34, 0.6);
-    color: #fff;
-    border: 1px solid #00EDE8;
+::v-deep .el-table--border .el-table__cell,
+.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
+  border-right: 1px solid #00ede8;
+}
 
-  }
+::v-deep .pagination-container {
+  background: rgba(0, 9, 34, 0.6) !important;
+  border: none;
+}
 
-  ::v-deep .el-pagination__total,
-  .el-pagination__jump {
-    color: #fff;
-  }
+.text {
+  font-size: 14px;
+}
 
-  ::v-deep .el-table td.el-table__cell,
-  .el-table th.el-table__cell.is-leaf {
-    border-bottom: 1px solid #00EDE8;
-  }
+.item {
+  margin-bottom: 18px;
+}
 
-  ::v-deep .el-table--border .el-table__cell,
-  .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
-    border-right: 1px solid #00EDE8;
-  }
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
 
-  ::v-deep .pagination-container {
-    background: rgba(0, 9, 34, 0.6) !important;
-    border: none;
-  }
+.clearfix:after {
+  clear: both;
+}
 
-  .text {
-    font-size: 14px;
-  }
+.el-card__header {
+  padding: 12px 20px;
+}
 
-  .item {
-    margin-bottom: 18px;
-  }
+.selectIcon-box {
+  text-align: center;
+  border: 1px solid #eeeeee;
+  border-right: 0;
+  border-bottom: 0;
 
-  .clearfix:before,
-  .clearfix:after {
-    display: table;
-    content: '';
-  }
+  .el-col {
+    padding: 10px 0;
+    border-right: 1px solid #eeeeee;
+    border-bottom: 1px solid #eeeeee;
 
-  .clearfix:after {
-    clear: both;
-  }
-
-  .el-card__header {
-    padding: 12px 20px;
-  }
-
-  .selectIcon-box {
-    text-align: center;
-    border: 1px solid #eeeeee;
-    border-right: 0;
-    border-bottom: 0;
-
-    .el-col {
-      padding: 10px 0;
-      border-right: 1px solid #eeeeee;
-      border-bottom: 1px solid #eeeeee;
-
-      &.active {
-        .iconfont {
-          color: #409EFF;
-        }
+    &.active {
+      .iconfont {
+        color: #409eff;
       }
     }
-
-    .iconfont {
-      cursor: pointer;
-      font-size: 20px;
-    }
   }
 
-  .custom-icon-input::before {
-    font-size: 18px;
-    position: absolute;
-    right: 10px;
-    top: 0;
+  .iconfont {
+    cursor: pointer;
+    font-size: 20px;
   }
-  .forestlistbox{
-    height: calc(100% - 30px);
-    padding: 10px;
-    overflow: auto;
-  }
-  .forestUl{
-    margin-bottom: 10px;
-    background: #071e4a;
-    padding:  10px 20px;
-  }
-  ::-webkit-scrollbar {
+}
+
+.custom-icon-input::before {
+  font-size: 18px;
+  position: absolute;
+  right: 10px;
+  top: 0;
+}
+.forestlistbox {
+  height: calc(100% - 30px);
+  padding: 10px;
+  overflow: auto;
+}
+.forestUl {
+  margin-bottom: 10px;
+  background: #071e4a;
+  padding: 10px 20px;
+}
+::-webkit-scrollbar {
   height: 10px;
   width: 10px;
   background: transparent;
-  border-radius: 5px
+  border-radius: 5px;
 }
 
 ::-webkit-scrollbar-thumb {
   padding-top: 100px;
-  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
+  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
+    inset -1px -1px 0 rgba(0, 0, 0, 0.07);
   background-color: #797979;
   min-height: 28px;
   border-radius: 4px;
-  background-clip: padding-box
+  background-clip: padding-box;
 }
 
-::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
-  border: 0
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-thumb {
+  border: 0;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
-  background-color: rgba(0, 0, 0, .4)
+  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
+  background-color: rgba(0, 0, 0, 0.4);
 }
 
 ::-webkit-scrollbar-thumb:active {
-  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
-  background-color: rgba(0, 0, 0, .5)
+  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
+  background-color: rgba(0, 0, 0, 0.5);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/gridman/forestranger/widget/ditu.vue b/src/views/gridman/forestranger/widget/ditu.vue
index 5a89eed..ef53fff 100644
--- a/src/views/gridman/forestranger/widget/ditu.vue
+++ b/src/views/gridman/forestranger/widget/ditu.vue
@@ -14,13 +14,13 @@ export default {
     return {
       map: null,
       clockInList: [],
-      markerArr:[]
+      markerArr: [],
     };
   },
   watch: {
     rowkey: function (e) {
-      console.log('123',e)
-      this.getClockInList()
+      console.log("123", e);
+      this.getClockInList();
     },
     lnglat: function (e) {},
     flyCenter: function (e) {
@@ -45,13 +45,13 @@ export default {
       getMethodCommon("/FireGrid/GetTotalCheckPoint").then((res) => {
         this.clockInList = res.result;
         for (var i = this.markerArr.length - 1; i >= 0; i--) {
-            this.markerArr[i].remove();
+          this.markerArr[i].remove();
         }
         this.addPointLayer();
       });
     },
     addPointLayer() {
-      let _this = this
+      let _this = this;
       this.clockInList.forEach((item) => {
         console.log("iii", item);
         let el = document.createElement("img"); //这里可以是任意标签
@@ -59,15 +59,19 @@ export default {
         el.src = "/img/dakadian.png"; //图片路径赋值
         el.style.width = "40px";
         // el.onclick = function(){
- 
+
         //   console.log('123item',item)
         //   _this.$emit("editClock",item)
         // }
-        
+        console.log(item)
+        const popup = new mapboxgl.Popup({ offset: 25 }).setHTML(`${item.pointname }<br />${item.usernames}`);
         // 添加自定义标记点
-        let marker = new mapboxgl.Marker(el).setLngLat([item.lng, item.lat]).addTo(this.map);
-        this.markerArr.push(marker)
-
+        let marker = new mapboxgl.Marker(el)
+          .setLngLat([item.lng, item.lat])
+          .setPopup(popup)
+          .addTo(this.map);
+          marker
+        this.markerArr.push(marker);
       });
     },
     initMap(url, jwd) {
@@ -85,14 +89,17 @@ export default {
         this.loadMengban();
         this.loadZhenJieLayer();
         this.loadXianJieLayer();
-        
+
         this.getClockInList();
       });
       this.map.on("click", (e) => {
         this.$emit("getLocation", e);
       });
+      this.map.on("contextmenu", (e) => {
+        this.$emit("rightClick", e);
+      });
     },
-    
+
     loadMengban() {
       this.map.addLayer({
         //蒙版图层   //通过边界数据反选 达到挖洞效果