网格化添加打卡

2023-08-27 16:11:53 +08:00 · 2023-08-27 16:06:54 +08:00
5 changed files with 357 additions and 23 deletions
--- a/public/img/dakadian.png
+++ b/public/img/dakadian.png
--- a/src/App.vue
+++ b/src/App.vue
@ -158,8 +158,10 @@ user-select: none; /* 标准语法 */
 .max-w {
  width: 100%;
 }
-
-.fz-16 {
+.fz-18{
+  font-size: 18px;
+}
+.fz-16{
  font-size: 16px;
 }
 .fz-14 {
--- a/src/views/gridman/forestranger/index.vue
+++ b/src/views/gridman/forestranger/index.vue
@ -20,22 +20,50 @@
    </sticky>
    <div class="app-container flex-item">
      <div class="fh">
-        <el-table ref="mainTable" :key='tableKey' :data="tableData" v-loading="listLoading" border fit
-          highlight-current-row style="width: 100%;" height="calc(100% - 54px)" @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>
-          <el-table-column prop="Name" label="姓名" show-overflow-tooltip align="center">
-          </el-table-column>
-          <el-table-column  label="性别" show-overflow-tooltip align="center">
-            <template slot-scope="scope">
-             {{scope.row.Sex == 0 ? '男' : '女'}}
-            </template>
-          </el-table-column>
+        <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>
+              <el-table-column prop="Name" label="姓名" show-overflow-tooltip align="center">
+              </el-table-column>
+              <el-table-column  label="性别" show-overflow-tooltip align="center">
+                <template slot-scope="scope">
+                {{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">
+              </el-input>
+              <el-button type="primary" size="mini" @click="getClockInList()">搜索</el-button>
+            </div>
+            <div class="forestlistbox">
+              <div class="forestUl" v-for="(item,index) in clockInList" :key="index">
+                <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>
+                  <el-button type="primary" size="mini" @click="gofly(item)">位置</el-button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="flex-1 max-w" style="border: 1px solid #00EDE8;position: relative;overflow: hidden;">
+            <DItu class="max-w" :rowkey="rowdataKey" :lnglat="clocklnglat" :flyCenter="flyCenter" ref="dituevent" @getLocation="getLocation"></DItu>
+          </div>
+        </div>
        
-        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize"
          @pagination="handleCurrentChange" />
      </div>
@ -46,6 +74,12 @@
      :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" @clockInSuccess="clockInSuccess" @close="clockInVisible = false"></clockInDia>
+    </el-dialog>

  </div>

@ -53,6 +87,8 @@
 </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"
@ -66,6 +102,7 @@
  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 {
@ -74,7 +111,9 @@
      permissionBtn,
      Pagination,
      AddForm,
-      Sticky
+      Sticky,
+      DItu,
+      clockInDia
    },
    mixins: [extend],
    directives: {
@ -83,6 +122,7 @@
    },
    data() {
      return {
+        rowdata: {},
        tableKey: 0,
        titleStr: '添加',
        tableData: [],
@ -94,7 +134,13 @@
          pageSize: 20,
          name: null,
        },
-        detailInfo:[]
+        detailInfo:[],
+        clocklnglat: '',
+        clockInList:[],
+        clockInName: '',
+        clockInVisible: false,
+        rowdataKey: 1,
+        flyCenter:[]

      }
    },
@ -106,11 +152,33 @@
    },
    created() {
      this.getList()
+      this.getClockInList()
    },
    mounted() {

    },
    methods: {
+      getLocation(e){
+        console.log('getLocation',e)
+        this.clockInVisible = true
+        this.clocklnglat = e
+      },
+      gofly(item){
+        console.log('iii',item)
+        this.flyCenter = [item.lng,item.lat]
+      },
+      clockInSuccess(){
+        console.log('231321')
+        this.rowdataKey++
+      },
+      getClockInList(){
+        let param = {
+          name: this.clockInName
+        }
+        getMethodCommon("/FireGrid/GetTotalCheckPoint",param).then(res =>{
+          this.clockInList = res.result
+        })
+      },
      add() {
        this.addServiceVisible = true;
        this.detailInfo=[]
@ -316,10 +384,7 @@
    color: #fff;
  }

-  ::v-deep .el-input__inner {
-    background: rgba(0, 9, 34, 1);
-    color: #fff;
-  }
+

  ::v-deep .el-dialog {
    background: rgba(10, 39, 78, 1);
@ -474,4 +539,43 @@
    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
+}
+
+::-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);
+  background-color: #797979;
+  min-height: 28px;
+  border-radius: 4px;
+  background-clip: padding-box
+}
+
+::-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-scrollbar-thumb:active {
+  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
+  background-color: rgba(0, 0, 0, .5)
+}
 </style>
--- a/src/views/gridman/forestranger/widget/clockIn.vue
+++ b/src/views/gridman/forestranger/widget/clockIn.vue
@ -0,0 +1,121 @@
+<template>
+<div style="width:100%;padding:10px 23px; z-index:10;background: rgba(0, 9, 34, 0.6);">
+    <el-form ref="form" size="mini" :model="paramForm" :rules="rules" label-width="140px" class="clockIn">
+        <el-form-item label="打卡点" prop="address">
+            <el-input v-model="paramForm.address" ></el-input>
+        </el-form-item>
+        <el-form-item label="责任人" prop="user">
+            <treeselect :options="hlyList" :normalizer="normalizer" v-model="paramForm.user" :multiple="true" :disable-branch-nodes="true" placeholder="请选择责任人">
+            </treeselect>
+        </el-form-item>
+        <el-form-item style="margin-top: 16%;">
+            <el-button @click="close()">取消</el-button>
+            <el-button type="primary" @click="submitForm('form')">保存</el-button>
+        </el-form-item>
+    </el-form>
+</div>
+</template>
+<script>
+import { listToTreeSelect } from '@/utils'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { postMethodCommon, getMethodCommon } from '../../../../api/common';
+export default {
+    name: "AddForm",
+    props: ['lnglat'],
+    components: {
+        Treeselect
+    },
+    data() {
+        return {
+            hlyList:[],
+            paramForm:{
+                address: '',
+                user: []
+            },
+            rules: {
+                user: [
+                    { required: true, message: '责任人不能为空', trigger: 'blur' },
+                ]
+            }
+            
+        }
+    },
+    watch:{
+        lnglat:function(e){
+            this.gethlyList();
+        }
+    },
+    created() {
+        this.gethlyList()
+    },
+    mounted() {
+    
+    },
+    methods: {
+        normalizer(node) {
+            node['isDisabled'] = true;  
+            if(node.type == '护林员' || node.child.length > 0){
+                node['isDisabled'] = false;
+            }
+
+            return {
+                id: node.id,
+                label: node.name,
+                children: node.child && node.child.length > 0 ? node.child: 0,
+            }
+        },
+        gethlyList(){
+            getMethodCommon("/FireGrid/LoadUsers").then(res =>{
+                this.hlyList = res.data
+            })
+        },
+        submitForm(){
+            this.$refs['form'].validate((valid) => {
+                if (valid) {
+                    let param = {
+                        id: 0,
+                        lng: this.lnglat.lngLat.lng,
+                        lat: this.lnglat.lngLat.lat,
+                        pointname: this.paramForm.address,
+                        userid: this.paramForm.user
+                    }
+                    postMethodCommon("/FireGrid/AddCheckPoint", param).then(response => {
+                        if (response.code == 200) {
+                            // 上传shp
+                            this.$emit("clockInSuccess");
+                            this.$message({
+                                type: "success",
+                                message: response.message
+                            })
+                        }
+                    })
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        close() {
+            this.$emit("close");
+        }
+    }
+}
+</script>
+<style scoped>
+::v-deep .el-form-item__label {
+    color: #fff;
+}   
+::v-deep .vue-treeselect__control{
+    background: rgba(0, 9, 34, 1);
+    color: #fff;
+}
+::v-deep .vue-treeselect__single-value{
+    color: #fff;
+}
+::v-deep .el-input__inner {
+    background: rgba(0, 9, 34, 1);
+    color: #fff;
+    height: 36px;
+  }
+</style>
--- a/src/views/gridman/forestranger/widget/ditu.vue
+++ b/src/views/gridman/forestranger/widget/ditu.vue
@ -0,0 +1,107 @@
+<template>
+  <div class="data-map" ref="datamap" id="mapbox"></div>
+</template>
+
+<script>
+import { postMethodCommon, getMethodCommon } from '../../../../api/common';
+import mapboxgl from "mapbox-gl";
+mapboxgl.accessToken =
+  "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
+export default {
+  props: ['rowkey','lnglat','flyCenter'],
+  data() {
+    return {
+      map: null,
+      clockInList: []
+    };
+  },
+  watch:{
+    rowkey:function(e){
+      const el = document.createElement('img'); //这里可以是任意标签
+					el.className = 'marker';
+					el.src = "/img/dakadian.png"; //图片路径赋值
+          el.style.width = "40px"
+					// 添加自定义标记点
+					new mapboxgl.Marker(el)
+						.setLngLat([this.lnglat.lngLat.lng,this.lnglat.lngLat.lat])
+						.addTo(this.map);
+    },
+    lnglat:function(e){
+      
+    },
+    flyCenter:function(e){
+      console.log('eee123',e)
+      this.flyTo(e)
+    }
+  },
+  mounted() {
+    this.$nextTick(function () {
+      this.initMap();
+    });
+  },
+  methods: {
+    flyTo(e){
+      this.map.flyTo({
+          center: e,//中心点
+          zoom: 14,//缩放比例
+          curve: 1
+        });
+    },  
+    getClockInList(){
+      getMethodCommon("/FireGrid/GetTotalCheckPoint").then(res =>{
+        this.clockInList = res.result
+        console.log('this.clockInList',this.clockInList)
+        this.addPointLayer()
+      })
+    },
+    addPointLayer(){
+      this.clockInList.forEach(item =>{
+        console.log('iii',item)
+        let el = document.createElement('img'); //这里可以是任意标签
+					el.className = 'marker';
+					el.src = "/img/dakadian.png"; //图片路径赋值
+          el.style.width = "40px"
+					// 添加自定义标记点
+					new mapboxgl.Marker(el)
+						.setLngLat([item.lng,item.lat])
+						.addTo(this.map);
+      })
+    },
+    initMap(url, jwd) {
+      let _this = this;
+      this.map = new mapboxgl.Map({
+        container: this.$refs.datamap,
+        style: "mapbox://styles/shichao123/clf3b1bxk007801moo0nnl87k",
+        center: [117.977325, 35.265961],
+        zoom: 14,
+        language: "zh-cmn",
+        projection: "globe",
+      });
+      this.map.on("load", () => {
+        this.getClockInList()
+      });
+      this.map.on('click', (e) => {
+        this.$emit("getLocation",e)
+      })
+    },
+    
+  },
+};
+</script>
+
+<style scoped>
+.data-map {
+  width: 100%;
+  height: 100%;
+}
+.data-map .map {
+  width: 100%;
+  height: 100%;
+}
+::v-deep.data-map .mapboxgl-ctrl-bottom-left {
+  display: none !important;
+}
+::v-deep.data-map .mapboxgl-ctrl-bottom-right {
+  display: none !important;
+}
+</style>
Author	SHA1	Message	Date
zzq	1e16026ae3	网格化添加打卡	2023-08-27 16:11:53 +08:00
zzq	35a72e598b	网格化添加打卡	2023-08-27 16:06:54 +08:00