扬州NSYH项目片段-业务地图

、、、

 

<template>
  <div>
    <a-collapse :bordered="false" v-model="activeKey">
      <a-collapse-panel key="1">
        <a-card :bordered="false">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row :gutter="24">
                <a-col :xs="xsN" :md="mdN" :xl="xlN" :xxl="xxlN">
                  <a-form-item label="机构名称">
                    <a-tree-select
                      multiple
                      checkable
                      v-model="queryParam"
                      show-search
                      placeholder="请选择机构"
                      allow-clear
                      treeNodeFilterProp="title"
                      :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
                      :treeData="departTreeData"
                      :replaceFields="replaceFields"
                      :max-tag-count= "maxNumber"
                      @change="onChange"
                    >
                    </a-tree-select>
                  </a-form-item>
                </a-col>
                <a-col :xs="xsN" :md="mdN" :xl="xlN" :xxl="xxlN">
                  <a-form-item label="客户类型">
                    <a-select v-model="selectValue" @change="selects">
                      <a-select-option v-for="item in selectList" :key="item.key">{{ item.name }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col :xs="xsN" :md="mdN" :xl="xlN" :xxl="xxlN">
                  <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="searchByCon" icon="search">查询</a-button>
                    <a-button type="primary" @click="reset" icon="reload" style="margin-left: 8px">重置</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <div class="statistics">
            <div style="width: 19%">
              <p>建档客户总数</p>
              <p>{{ totalCount }}个</p>
            </div>
            <div style="width: 19%">
              <p>建档个人</p>
              <p>{{ personCount }}人</p>
            </div>
            <div style="width: 19%">
              <p>建档商户</p>
              <p>{{ merchantCount }}个</p>
            </div>
            <div style="width: 19%">
              <p>建档农户</p>
              <p>{{ farmerCount }}户</p>
            </div>
            <div style="width: 19%">
              <p>建档企业</p>
              <p>{{ companyCount }}家</p>
            </div>
          </div>
        </a-card>
      </a-collapse-panel>
    </a-collapse>
    <!-- 业务统计 -->
    <a-card :bordered="false"> </a-card>

    <a-card>
      <!-- 渲染地图的div容器 -->
      <div id="container"></div>
      <!-- 搜索框-->
      <div id="search">
        <a-input-search  placeholder="搜索" v-model="keyword" @search="search" />
      </div>
    </a-card>
      <j-modal
        v-if="modalShow"
        :visible="true"
        :fullscreen="true"
        title="客户详情查看"
        :footer="null"
        @cancel="modalShow = false"
      >
        <enterprise-details v-if="leaf == 1 && custType == 4" ref="EnterpriseDetails"></enterprise-details>
        <families-details v-if="leaf == 1 && custType == 2" ref="FamiliesDetails"></families-details>
        <merchant-details v-if="leaf == 1 && custType == 3" ref="MerchantDetails"></merchant-details>
      </j-modal>
  </div>
</template>

<script>
var center,  map, infoWindow
let marker = null
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction, postAction } from '@/api/manage'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import FamiliesDetails from '@/views/buildRecordManage/Details/FamiliesDetails'
import EnterpriseDetails from '@/views/buildRecordManage/Details/EnterpriseDetails'
import MerchantDetails from '@/views/buildRecordManage/Details/MerchantDetails'

export default {
  mixins: [JeecgListMixin],

  components: { JDictSelectTag, FamiliesDetails, EnterpriseDetails, MerchantDetails },
  data() {
    return {
      activeKey: ['1'],
      maxNumber: 4,
      xxlN: 6,
      xlN: 8,
      mdN: 10,
      xsN: 12,
      markerArr: [], //点标记
      selectList: [
        { key: '', name: '全部' },
        // { key: '1', name: '个人客户类型' },
        { key: '2', name: '农户' },
        { key: '3', name: '商户' },
        { key: '4', name: '企业' },
      ],

      //地图
      defaultZoom:11,//默认缩放级别
      coordinateX: '', //当前点击经纬度
      coordinateY: '', //当前点击经纬度
      map: {},
      center: {},
      TMap: {},
      marker: {},
      coordinateXcenter: '', //当前点击经纬度
      coordinateYcenter: '', //当前点击经纬度
      coordinateLeft: [], //东北角
      coordinateLeft2: [], //东北角
      coordinateRight: [], //西南角
      coordinateRight2: [], //西南角
      //建档数量统计
      personCount: '', //个人
      farmerCount: '', //农户
      companyCount: '', //企业
      merchantCount: '', //商户
      totalCount: '', //总建档数量
      //建档详情组件
      custType: '', //一级客户类型
      leaf: '', //等于1时弹开建档详情组件==0时双击点标记放大地图
      // 机构树
      departTreeData: [],
      replaceFields: { children: 'children', title: 'title', key: 'orgCode', value: 'orgCode' },

      //查询
      queryParam: [],
      keyword:'',
      isSearch:'false',
      initParam: [],
      initCenter:{},
      selectValue: '',
      modalShow: false,
      currentMarker: null,
      url: {
        list: '',
      },
      mapDateD: 1,
      mapData: {
        bounds: {
          ntLat: '',
          ntLng: '',
          swLat: '',
          swLng: '',
        },
        center: {
          lat: '',
          lng: '',
        },
        customType: '',
        dossierStatus: 1,
        name: '',
      },
      bigMarkerId: null,
    }
  },

  created() {

  },
  mounted() {
    let obj = {
      orgCode: this.$store.getters.userInfo.orgCode,
    }
    getAction('visit/electricFence/queryLngAndLatByOrg', obj).then((res) => {
      if (res.success) {
        this.coordinateY = res.result.lng?res.result.lng:119.383405;
        this.coordinateX = res.result.lat?res.result.lat:32.379967;
      }else{
        //119.383405	32.379967
        this.coordinateY = 119.383405
        this.coordinateX = 32.379967
      }
      this.initCenter.x = this.coordinateX;
      this.initCenter.y = this.coordinateY;
      this.initTMap();
    });
    this.getDepart()
    this.flushCount();
    // map.destroy()
  },
  methods: {
    loadData() {},

    search(s){
      if (s == undefined || s == null || s == '') {
        return
      }
      this.isSearch = 'true';
      this.searchKeyword();
    },
    selects(e) {
      this.selectValue = e
      this.searchByCon();
    },
    onChange(e,node) {
      //覆盖orgCodes
      //如果选中了子节点则父节点取消选中
      this.searchByCon();
    },
    //重置按钮 中心点位
    reset() {
      this.selectValue = ''
      this.keyword = ''
      this.queryParam = this.initParam;
      if (marker) {
        marker.setMap(null)
        marker = null
      }
      this.searchByCon();
      var newCenter = new TMap.LatLng(this.initCenter.x, this.initCenter.y);
      map.setZoom(this.defaultZoom);
      map.panTo(newCenter,1000);
    },

    searchByCon(){
      this.isSearch = 'false';
      this.query();
    },
    searchKeyword() {
      this.query();
    },

    query() {
      infoWindow.close();
      this.setMapData();
      this.flushCount();
    },

    // 获取机构名称
    getDepart() {
      getAction('sys/sysDepart/querySubDepTreeList').then((res) => {
        if (res.success) {
          let rs = res.result
          // let dataAuthority = this.$store.getters.userInfo.dataAuthority
          let list = []
          //超管和其他
          // if(dataAuthority == "super_administrators"){
          //      list = [this.$store.getters.userInfo.orgCode];
          // }else{
          //   function deep(data) {
          //     if (data.length > 0) {
          //       data.forEach((it) => {
          //         if (it.children) {
          //           deep(it.children)
          //           list.push(it.orgCode)
          //         } else {
          //           list.push(it.orgCode)
          //         }
          //       })
          //     }
          //     return list
          //   }
          //   deep(rs)
          // }
          rs.forEach((item) => {
            item.title = item.departName
          })
          this.departTreeData = rs
          this.queryParam = list;
          this.initParam = list;
        }
      });
    },

    setMapData() {
      var mapCenter = map.getCenter() //获取地图中心点坐标
      var mapBounds = map.getBounds() //获取当前地图的视野范围
      let objs = {
        bounds: {
          ntLat: '',
          ntLng: '',
          swLat: '',
          swLng: '',
        },
        center: {
          lat: '',
          lng: '',
        },
        zoom: '',
        dossierStatus: '',
        name: '',
      }
      if (mapBounds) {
        objs.zoom = map.getZoom()
        //对角经纬度
        objs.bounds.ntLat = mapBounds.getNorthEast().getLat().toFixed(6)
        objs.bounds.ntLng = mapBounds.getNorthEast().getLng().toFixed(6)
        objs.bounds.swLat = mapBounds.getSouthWest().getLat().toFixed(6)
        objs.bounds.swLng = mapBounds.getSouthWest().getLng().toFixed(6)
        // 中心经纬度
        objs.center.lat = mapCenter.getLat().toFixed(6)
        objs.center.lng = mapCenter.getLng().toFixed(6)
      }
      this.mapData = objs
      this.postMapData()

    },
    postMapData() {
      let params = this.mapData
      params.customType = this.selectValue
      params.orgCodes = this.queryParam
      // if(this.isSearch == 'true'){
        params.name=this.keyword
        params.search = this.isSearch;
      // }
      //权限
      // let dataAuthority = this.$store.getters.userInfo.dataAuthority
      //超管和其他
      // if(dataAuthority == "super_administrators"){
      //   params.orgCodes = this.queryParam
      // }else{
      //   params.orgCodes = this.queryParam
      // }
      postAction('visit/electricFence/queryDossierByOrg', params).then((res) => {
        this.renderMarker(res.result)
      });
    },
    //给点标记数组赋值接口数据
    renderMarker(data) {
      if (marker) {
        // let geoms = marker.getGeometries();
        // //geoms和data 添加新的，删除已经不存在的
        marker.setMap(null)
        marker = null
      }
      this.markerArr = data.map((item, index) => {
        let retData = {
          leaf: `${item.leaf}`,
          customType: `${item.customType}`,
          lat: `${item.lat}`,
          lng: `${item.lng}`,
          id: `${item.id}`,
          styleId: 'marker',
          // name: `${item.name}`,
          name: Math.round(Math.random()*100),
          position: new TMap.LatLng(item.lat, item.lng),
          properties: {
            title: 'marker',
            ...item,
          },
        }
        retData.content = `${item.name}`
        return retData
      });

      //初始化marker
      marker = new TMap.MultiMarker({
        id: Date.now(),
        map: map,
        styles: {
          marker: new TMap.MarkerStyle({
            width: 26,
            height: 26,
            offset: { x: 0, y: -24 },
            color: '#CC010A',
            src: require('@/assets/markerDefault.png'),
            // size: 15,
          }),
          bigMarker: new TMap.MarkerStyle({
            width: 26,
            height: 26,
            offset: { x: 0, y: -24 },
            color: '#cc010a',
            src: require('@/assets/markerDefault.png'),
            // size: 15,
          }),
        },
        geometries: this.markerArr,
      });
      // // 初始化几何图形及编辑器
      // const editor = new TMap.tools.GeometryEditor({
      //   map, // 编辑器绑定的地图对象
      //   overlayList: [{
      //     overlay: marker, // 可编辑图层
      //     id: "marker",
      //     selectedStyleId: "bigMarker"  // 被选中的marker会变为高亮样式
      //   }],
      //   // actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式
      //   activeOverlayId: "marker", // 激活图层
      //   selectable: true
      // });
      //点击事件在这里
      let that = this
      marker.on('click', function(evt){
        that.markerClick(evt);
      });
      marker.on('dblclick', function(evt){
        that.markerDbClick(evt);
      });
      // marker.on('mousemove',function(evt){
      //   // cursor:pointer;//鼠标变小手
      // });
      // marker.on('hover',function(evt){
      //   alert('悬停')
      // });
    },
    addInfoWindow() {
      infoWindow = new TMap.InfoWindow({
        map: map,
        position: new TMap.LatLng(this.coordinateX,this.coordinateY),
        offset: { x: 0, y: -32 }, //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
      })
      infoWindow.close()
    },
    flushCount(){
      let args = {
        orgCodes: this.queryParam
      }
      //获取建档数量
      postAction('sys/electricMap/telectricMapCount', args).then((res) => {
        ;(this.personCount = res.result.personCount), //个人
          (this.farmerCount = res.result.farmerCount), //农户
          (this.companyCount = res.result.companyCount), //企业
          (this.merchantCount = res.result.merchantCount), //商户
          (this.totalCount = res.result.totalCount) //总建档数量
      });
    },
    initTMap() {
      //
      center = new TMap.LatLng(this.coordinateX, this.coordinateY)
      //设置中心点坐标
      //初始化地图
      map = new TMap.Map('container', {
        zoom:this.defaultZoom,//设置地图缩放级别
        center: center,//设置地图中心点坐标
      });
      this.addInfoWindow();
      //绑定事件
      //单击
      map.on('click', function (evt) {
        if(infoWindow){
          infoWindow.close();
        }
      });
      // map.on('dblclick', function (evt) {
      //   alert('双击了地图');
      // });
      // //平移结束
      // map.on('panend', function () {
      //   that.setMapData();
      // });
      // //拖拽结束
      // map.on('dragend', function () {
      //   alert("拖拽结束");
      // });
      // //地图缩放
      let lastTime, currentTime;
      map.on('zoom', function (event) {
        lastTime = currentTime;
        currentTime = new Date().getTime();
        // 与上次时间间隔在500毫秒以上
        if(currentTime-lastTime>300 || currentTime == lastTime ){
          infoWindow.close()
          that.setMapData()
        }
      });
      //当地图容器中可见的瓦片加载完后会触发此事件
      let that = this
      map.on('tilesloaded', function (event) {
        that.setMapData();
      });
      // //地图中心点变化
      // map.on('center_changed', function () {
      //   alert("地图中心点变化");
      // });
    },

    //建档详情组件传参
    markerClick(item) {
      this.custType = item.geometry.customType
      this.leaf = item.geometry.leaf

      // if (item.geometry.leaf == 1) {
      if (this.custType == '2' && item.geometry.leaf == 1) {
        this.modalShow = true
        setTimeout(() => {
          this.$refs.FamiliesDetails.modelGetCustId(item.geometry.properties.id)
        }, 300)
      } else if (this.custType == '4' && item.geometry.leaf == 1) {
        this.modalShow = true
        setTimeout(() => {
          this.$refs.EnterpriseDetails.modelGetCustId(item.geometry.properties.id)
        }, 100)
      } else if (this.custType == '3' && item.geometry.leaf == 1) {
        this.modalShow = true
        setTimeout(() => {
          this.$refs.MerchantDetails.modelGetCustId(item.geometry.properties.id)
        }, 100)
        // }
      } else {
        infoWindow.open()
        infoWindow.setPosition(item.geometry.position)
        let cont = `<p><span>${item.geometry.properties.name}</span><br/><span>${item.geometry.properties.desc}</span></p>`
        infoWindow.setContent(cont)
      }
      // let nowZoom = map.getZoom();
      // map.setZoom(nowZoom + 1);
      map.panTo(new TMap.LatLng(item.geometry.lat, item.geometry.lng),1000);
    },
    markerDbClick(item) {
      map.panTo(new TMap.LatLng(item.geometry.lat, item.geometry.lng),1000);
      let cont = null;
      cont = `<p><span>${item.geometry.properties.name}</span><br/><span>${item.geometry.properties.desc}</span></p>`
      infoWindow.open()
      infoWindow.setPosition(item.geometry.position)
      infoWindow.setContent(cont)
    },
    drawerClose() {
      marker.updateGeometries([
        {
          ...this.currentMarker.geometry,
          styleId: 'marker',
        },
      ])
      this.modalShow = false
    },

    //初始化
  },
  computed: {},
}
</script>

<style lang="less" scoped>
.statistics {
  width: 100%;
  display: flex;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}
.ant-select{
  z-index: 100;
}

.ant-card-body  {
  padding:10px;
}
.ant-card-bordered {
  border: 0px;
}
#search {
  position: absolute;
  top: 30px;
  left: 3%;
  margin: auto;
  width: 252px;
  z-index: 1000;
}
</style>

 、、

下面是电子围栏地图

<template>
  <div>
    <div class="card_box">
      <!-- 左侧总支行树结构 -->
      <a-card :bordered="false" :hoverable="true" :style="collapsed ? 'width: 20%' : 'width: 5%'">
        <div>
          <a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
            <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
          </a-button>
          <div>
            <a-tree
              v-if="collapsed"
              :treeDefaultExpandAll="true"
              :style="100"
              :replaceFields="replaceFields"
              :autoExpandParent="true"
              :tree-data="treeData"
              show-icon
              @select="onSelect"
              @rightClick="rightXY"
            >
              <template #title="{ key: treeKey, title, children }">
                <a-dropdown :trigger="['contextmenu']">
                  <span>{{ title }}</span>
                  <!-- <template #overlay>
                    <a-menu>
                      <a-menu-item key="1">
                        <a href="#" @click="customerEdit()">编辑经纬度</a>
                      </a-menu-item>
                    </a-menu>
                  </template> -->
                </a-dropdown>
              </template>
              <!-- <a-icon slot="switcherIcon" type="carry-out" /> -->
              <!-- <a-icon slot="switcherIcon" type="form" /> -->
            </a-tree>
          </div>
        </div>
      </a-card>
      <!-- 支行经纬度编辑 -->
      <a-modal v-model="visibleEdit2" title="编辑支行经纬度" @ok="edit2" @cancel="clearType">
        <a-form>
          <!--支行经度 -->
          <a-form-item label="支行经度">
            <a-input placeholder="请输入支行纬度" v-model="coordinateY"> </a-input>
          </a-form-item>
          <!--支行纬度 -->
          <a-form-item label="支行纬度">
            <a-input placeholder="请输入支行经度" v-model="coordinateX"> </a-input>
          </a-form-item>
        </a-form>
      </a-modal>

      <!-- 右侧 -->
      <!-- <a-empty v-if="orgCode == ''" style="width: 65%" /> -->
      <div style="width: 100%">
        <!-- 右侧表格 -->
        <a-collapse :bordered="false" v-model="activeKey" v-if="fence.orgName != ''">
          <a-collapse-panel key="1">
            <a-card :bordered="false">
              <a-descriptions bordered :column="2">
                <a-descriptions-item label="支行编号"> {{ fence.orgCode }} </a-descriptions-item>
                <a-descriptions-item label="最新维护人所属机构名"> {{ createOrgName }} </a-descriptions-item>
                <a-descriptions-item label="支行名称"> {{ fence.orgName }} </a-descriptions-item>
                <a-descriptions-item label="最后维护时间"> {{ updateTime }} </a-descriptions-item>
                <a-descriptions-item label="最新维护人工号"> {{ updateBy }} </a-descriptions-item>
                <a-descriptions-item label="支行纬度">
                  <div>
                    {{ coordinateX }}
                    <a @click="customerEdit()">修改</a>
                  </div>
                </a-descriptions-item>
                <a-descriptions-item label="支行经度">
                  <div>
                    {{ coordinateY }}
                    <a @click="customerEdit()">修改</a>
                  </div>
                </a-descriptions-item>
              </a-descriptions>
            </a-card>
          </a-collapse-panel>
        </a-collapse>

        <!-- 右侧地图 -->
        <a-card :bordered="false">
          <b slot="title">{{ fence.orgName }}-网格配置情况</b>
          <a-button slot="extra" type="primary" @click="addFence">保存选择</a-button>

          <!-- 渲染地图的div容器 -->
          <div class="map" id="container" ref="tmap" style="width: 100%; height: 1000px"></div>
          <div id="toolControl">
            <div class="toolItem" id="polyline" @click="add" title="多边形">
              <img src="../../../../public/polygon.png" alt="" />
            </div>
            <div class="toolItem" id="delete" @click="del" title="删除">
              <img src="../../../../public/delete.png" alt="" />
            </div>
          </div>
          <!-- 切换 -->
        </a-card>
      </div>
    </div>
  </div>
</template>

<script>
let editor,
  info,
  TMap,
  map,
  MultiPolygon,
  id = 0

import { queryDepartTreeList } from '@/api/api'
import { getAction, postAction } from '@/api/manage'
// import { log } from 'util'
export default {
  data() {
    return {
      treeData: [], //左侧树结构数据
      visibleEdit2: false, //编辑弹框控制
      replaceFields: { children: 'children', title: 'title', key: 'orgCode' },
      orgCode: '', //code，支行编号
      updateTime: '', //最后维护时间
      createOrgName: '', //最新维护人所属机构名
      orgName: 'null', //支行名称
      updateBy: '', //最后维护人工号
      coordinateX: '32.379967', //当前点击经纬度
      coordinateY: '119.383405', //当前点击经纬度
      fence: {
        orgCode: '',
        orgName: '',
        coordinateList: [],
      },
      //删除用数组
      delCoordinateList: [],
      echoCoordinateList: [],
      //表格渲染数组
      tableArr: false,
      //地图
      map: {},
      center: {},
      TMap: {},
      marker: {},
      keywords: '',
      //折叠左侧
      collapsed: true,
      activeKey: ['1'],

      //初始化化数据
      paths: [
        [
          { lat: 28.159730931106623, lng: 112.99104925198526 },
          { lat: 28.155023400813775, lng: 112.99139234751101 },
          { lat: 28.155817456440566, lng: 112.999133443544 },
          { lat: 28.160222468268145, lng: 112.99836147811993 },
        ],
      ],

      editorFlag: false,
      currentPaths: [],
    }
  },
  // props: {
  //   tMapKey: {
  //     default: 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77',
  //     type: String,
  //   },
  // },
  created() {
    this.getDepart()
    console.log(this.orgName, '11111')
  },
  mounted() {
    // this.loadScript(() => {
    this.initTMap()
    // })
  },
  methods: {
    //折叠左侧
    toggleCollapsed() {
      console.log(this.collapsed, '折叠左侧状态')
      this.collapsed = !this.collapsed
    },
    // 超管获得机构名称
    getDepart() {
      getAction('sys/sysDepart/querySubDepTreeList').then((res) => {
        if (res.success) {
          console.log('新的支行数据', res.result)
          let data = res.result
          data.forEach((item) => {
            item.title = item.departName
          })
          this.treeData = data
        }
      })
    },
    // 点击树节点触发
    onSelect(selectedKeys, e) {
      map.destroy()
      // console.log('selected', selectedKeys[0])
      console.log('eeeee111111111111111111111', e.node)
      this.fence.orgCode = e.node.eventKey
      this.fence.orgName = e.node.dataRef.departName
      this.orgCode = e.node.eventKey
      console.log(this.orgCode, '当前右击的支行code')

      let obj = {
        orgCode: this.fence.orgCode,
      }
      this.currentPaths = []
      this.editorFlag = false
      //定位支行经纬度接口（这块分两个接口，此接口专门定位经纬度，下方接口返回支行信息）
      getAction('visit/electricFence/queryLngAndLatByOrg', obj).then((res) => {
        console.log(res, '点击树节点返回该支行经纬度')
        if (res.success) {
          if (res.result.lat == null || res.result.lng == null) {
            ;(this.coordinateX = '32.379967'), (this.coordinateY = '119.383405')
          } else {
            this.coordinateX = res.result.lat
            this.coordinateY = res.result.lng
          }

          console.log(this.coordinateX, this.coordinateY, '点击树结构返回的经纬度')
          // this.currentPaths = res.result.map((item) => [item.coordinateX, item.coordinateY])
          // if (this.currentPaths.length) this.editorFlag = true
          this.initTMap()
          this.mapClick()
        }
      })

      //这块是点击树节点返回支行基础信息 传参一样  接口不一样 注意分辨（参数支行code）
      getAction('visit/electricFence/queryByPage', obj).then((res) => {
        console.log(res, '1111点树节点请求')
        if (res.success) {
          if (res.result.length <= 0 || res.result[0].coordinateX == null || res.result[0].coordinateY == 'null') {
            this.tableArr = false
            // this.coordinateY = '116.307503'
            // this.coordinateX = '39.984104'
            // this.initTMap()
            // return false
          } else {
            this.tableArr = true
            // this.coordinateY = res.result[0].coordinateY
            // this.coordinateX = res.result[0].coordinateX
            // console.log(this.coordinateY, 'fz')
            this.updateTime = res.result[0].createTime
            this.createOrgName = res.result[0].createOrgName

            this.updateBy = res.result[0].createBy

            this.fence.orgCode = res.result[0].orgCode
            this.fence.orgName = res.result[0].orgName
            this.currentPaths = res.result.map((item) => [item.coordinateX, item.coordinateY])
            if (this.currentPaths.length) {
              // this.coordinateY = res.result[0].coordinateY
              // this.coordinateX = res.result[0].coordinateX
              this.editorFlag = true
            }
            map.destroy()
            this.initTMap()
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    //编辑弹框
    customerEdit(obj) {
      console.log('编辑经纬度', obj)
      this.visibleEdit2 = true
    },
    //右键点击树节点
    rightXY(e) {
      console.log(e, '右键点击树节点')
      this.orgCode = e.node.eventKey
      console.log(this.orgCode, '当前右击的支行code')
    },
    //编辑支行经纬度确定按钮  接口处
    edit2() {
      // if (this.coordinateXemit != this.coordinateX || this.coordinateYemit != this.coordinateY) {
      let obj = {
        lat: this.coordinateX,
        lng: this.coordinateY,
        orgCode: this.orgCode,
      }
      console.log(obj, '编辑编辑编辑参数')
      getAction('/visit/electricFence/updateLngAndLatByOrg', obj).then((res) => {
        if (res.success) {
          console.log(res, '修改成功')

          this.$message.info('修改成功')
          this.visibleEdit2 = false
        } else {
          this.$message.error('修改失败')
        }
      })
      // } else {

      // }
    },
    // 清除编辑经纬度缓存
    clearType() {
      this.visibleEdit2 = false
    },
    initTMap() {
      //   获取地图ContainerDom
      let tMapDom = document.getElementById('container')
      //   把挂载在window上面的Tmap对象放到组件内部
      this.TMap = window.TMap

      TMap = this.TMap

      //   初始化地图中心
      let defaultcenter = new this.TMap.LatLng(this.coordinateX, this.coordinateY)
      console.log(this.currentPaths)

      //   创建地图对象
      this.map = new this.TMap.Map(tMapDom, {
        center: defaultcenter, //设置地图中心点坐标
        zoom: 12, //设置地图缩放级别
        pitch: 43.5, //设置俯仰角
        rotation: 45, //设置地图旋转角度
        viewMode: '2D',
      })

      map = this.map
      this.renderMultiPolygon()
      this.createMarker()
    },

    renderMultiPolygon() {
      const path = this.currentPaths.map((item) => new TMap.LatLng(...item))
      MultiPolygon = new TMap.MultiPolygon({
        map,
        styles: {
          //默认样式
          highlight: new TMap.PolygonStyle({
            color: 'rgba(202, 67, 58, 0.1)',
            showBorder: true, //Boolean 是否显示边线，默认为false
            borderColor: 'rgba(202, 67, 58, 0.8)', //string  边线颜色，支持rgb()，rgba()，#RRGGBB等形式，默认为#3777FF，
          }),
        },
        //多边形数据
        geometries: [
          {
            id: 'p1', //该多边形在图层中的唯一标识（删除、更新数据时需要）
            styleId: 'highlight', //绑定样式名
            paths: path, //多边形轮廓
          },
        ],
      })
      this.initGeometry()
    },

    mapClick() {
      this.map.on('click', (event) => {
        // var lat = evt.latLng.getLat();
        // var lng = evt.latLng.getLng();
        window.console.log(event, '12121211221121212121212')
        // 设置当前地图中心点
        // this.setMapCenter(event.latLng)
        // 如果存在marker伤处marker
        if (this.marker) {
          this.marker.setMap(null)
          this.marker = null
        }
        // 重新创建marker
        this.createMarker(event.latLng)
        // let poi = event.poi
        // if (poi) {
        // 拾取到POI
        //   设置信息窗口
        // info.setContent(poi.name).setPosition(poi.latLng).open()
        // } else {
        // 没有拾取到POI
        // info.close()
        // }
      })
    },

    //删除
    del() {
      // console.log(this.fence.coordinateList, '1111111111111111111111111111')
      // if (this.fence.coordinateList.length <= 0) {
      //   this.$message.info('请选中后删除')
      //   console.log("aaaaaaaaaaaaaaaaa");
      // }
      this.editorFlag = false

      this.fence.coordinateList = []
      editor.delete()
    },

    //添加
    add() {
      if (this.editorFlag) return this.$message.error('请删除当前多边形再进行编辑')
      //设置为添加模式
      console.log(editor)
      editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW)
    },
    //编辑
    edit() {
      //设置为编辑模式
      editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT)
    },

    //格式化返回的经纬度
    pathElems(geometry) {
      var lngLat = []
      for (const item of geometry.paths) {
        const lng = item.getLng()
        const lat = item.getLat()

        lngLat.push({
          lat: lat,
          lng: lng,
        })
      }
      return lngLat
    },

    dataList(pathArr) {
      // var list = editor.getOverlayList();
      // console.log("list", list);

      var pathList = []

      if (pathArr) {
        pathArr.forEach((item) => {
          var simplePath = []
          item.forEach((items) => {
            simplePath.push(new TMap.LatLng(items.lat, items.lng))
          })
          id = id + 1
          var path = {
            id: id,
            paths: simplePath,
            styleId: 'highlight',
          }
          pathList.push(path)
        })
        // 画好之后赋值  准备传入后端接口
        console.log('pathList', pathList)
        // pathList.paths.forEach((item, index) => {
        //   this.fence.coordinateList.push({ coordinateX: item.lat, coordinateY: item.lng })
        //   this.delCoordinateList.push(item.lat)
        //   this.delCoordinateList.push(item.lng)
        // })
      }
      return pathList
    },

    //初始化几何图形及编辑器
    initGeometry() {
      //初始化数据
      var pathArr = this.paths

      //多边形范围
      var simplePath = this.dataList(pathArr)

      //初始化几何图形及编辑器
      editor = new TMap.tools.GeometryEditor({
        map, // 编辑器绑定的地图对象
        overlayList: [
          // 可编辑图层
          {
            overlay: MultiPolygon,
            id: 'polygon',
            drawingStyleId: 'highlight', //默认样式key
            selectedStyleId: 'highlights', //选中样式key
          },
        ],
        actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式
        activeOverlayId: 'polygon', // 激活图层
        selectable: true, // 开启点选功能
        snappable: true, // 开启吸附
      })
      console.log(editor)

      this.evtResult()
    },

    //监听事件
    evtResult() {
      // 监听绘制结束事件，获取绘制几何图形
      editor.on('draw_complete', (geometry) => {
        var lngLat = [this.pathElems(geometry)]
        // this.paths = this.paths.concat([lngLat]);
        console.log(lngLat, '会直接输监听')
        lngLat[0].forEach((item, index) => {
          this.fence.coordinateList.push({ coordinateX: item.lat, coordinateY: item.lng })
          this.delCoordinateList.push(item.lat)
          this.delCoordinateList.push(item.lng)
        })
        console.log(this.fence, 'this.fencethis.fence!!')
        lngLat[0].forEach((item, index) => {
          this.echoCoordinateList.push({ item })
          this.echoCoordinateList.push(item.lat)
          this.echoCoordinateList.push(item.lng)
        })
        //删除新加的多边形
        MultiPolygon.remove(geometry.id)

        //修改id后重新渲染
        MultiPolygon.add(this.dataList(lngLat))

        //设置为编辑模式
        editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT)

        this.editorFlag = true
      })

      // 监听删除、修改、拆分、合并完成事件
      let evtList = ['delete', 'adjust', 'split', 'union']
      evtList.forEach((evtName) => {
        editor.on(evtName + '_complete', (evtResult) => {
          console.log(evtName, evtResult)
        })
      })

      // 监听拆分失败事件，获取拆分失败原因
      editor.on('split_fail', (res) => {
        alert(res.message)
      })
      // 监听合并失败事件，获取合并失败原因
      editor.on('union_fail', (res) => {
        alert(res.message)
      })
    },

    // 创建信息窗口

    // 创建marker
    createMarker(defaultcenter) {
      console.log(new this.TMap.LatLng(this.coordinateX, this.coordinateY), '点标记')
      this.marker = new this.TMap.MultiMarker({
        id: 'marker-layer', //图层id
        map,
        styles: {
          //点标注的相关样式
          marker: new this.TMap.MarkerStyle({
            width: 26,
            height: 26,
            offset: { x: 0, y: -24 },
            color: '#CC010A',
            src: require('@/assets/markerDefault.png'),
          }),
        },
        geometries: [
          {
            //点标注数据数组
            id: 'demo',
            styleId: 'marker',
            position: new this.TMap.LatLng(this.coordinateX, this.coordinateY),
            properties: {
              title: 'marker',
            },
            content: this.fence.orgName,
          },
        ],
      })
    },
    // 2d视角
    // change2D() {
    //   this.map.setViewMode('2D')
    // },
    // 3D视角
    // change3D() {
    //   this.map.setViewMode('3D')
    //   //设置斜角
    //   this.map.setPitch(70)
    // },
    // 获取中心
    // 也就是初始化的位置
    // getMapCenter() {
    //   window.console.log(this.map.getCenter())
    //   this.setMapCenter(this.map.getCenter())
    // },

    // loadScript(callback) {
    //   var script = document.createElement('script')
    //   script.type = 'text/javascript'
    //   script.src = `https://map.qq.com/api/gljs?v=1.exp&key=${this.tMapKey}&callback=init&libraries=tools`

    //   document.body.appendChild(script)
    //   if (script.readyState) {
    //     //IE
    //     //这里只有反人类设计的IE才有
    //     script.onreadystatechange = function () {
    //       if (script.readyState == 'complete' || script.readyState == 'loaded') {
    //         script.onreadystatechange = null
    //         //callback&&callback()是判断传入的回调函数是不是空的如果是空的就不执行，如果不是空的就执行
    //         callback && callback()
    //       }
    //     }
    //   } else {
    //     //非IE
    //     script.onload = function () {
    //       callback && callback()
    //     }
    //   }
    // },

    // destroyed() {
    //   this.map.destroy()
    // },

    //保存电子围栏选择
    addFence() {
      if (this.fence.coordinateList.length <= 0) {
        this.$message.error('请先设置电子围栏再保存~')
        return false
      }
      postAction('visit/electricFence/batchAdd', this.fence).then((res) => {
        if (res.success) {
          this.$message.info(res.message)
          // this.initMap()
        }
      })
    },
  },
}
</script>

<style scoped lang="less">
.card_box {
  // width: 100%;
  display: flex;
  // justify-content: space-around;
}
.industry_right {
  display: flex;
  justify-content: space-between;
}
#toolControl {
  position: absolute;
  top: 100px;
  left: 45%;
  right: 0px;
  margin: auto;
  width: 252px;
  z-index: 1001;
}

.toolItem {
  width: 30px;
  height: 30px;
  float: left;
  margin: 1px;
  padding: 4px;
  border-radius: 3px;
  background-size: 30px 30px;
  background-position: 4px 4px;
  background-repeat: no-repeat;
  // box-shadow: 0 1px 2px 0 #e4e7ef;
  // background-color: #ffffff;
  // border: 1px solid #ffffff;
}
</style>