tz-onest-data/data-ui/src/views/data/common/ISuperMapAreaMarker.vue

<template><div>
    <el-dialog title="经纬度" :visible.sync="showLongitude" append-to-body width="80%" @close='close'>
      <el-input v-show="false" v-model="obj.longitude"></el-input>
      <el-input v-show="false" v-model="obj.latitude"></el-input>
      <Supermap ref="Supermap" style="width: 100%;height: 75vh;" :mapDiv="uuid" :mapSite="{doubleClickZoom:false}"
                :codes="['9fa5']" :isSideBySide="false" :showLatLng="showLL"></Supermap>
            <el-button type="primary" @click="closeDialog">确定</el-button>
    </el-dialog>
    <el-dialog title="线坐标" :visible.sync="showLongitudex" append-to-body @close='close' width="80%">
      <Supermap ref="LineSupermap" style="width: 100%;height:75vh"
                :mapDiv="uuid" :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"
                :showLineLatLng="showAreaLatLng"></Supermap>
            <el-button type="primary" @click="closeDialog">确定</el-button>
    </el-dialog>
    <el-dialog title="区域坐标" :visible.sync="showLongitudeq" @close='close' width="80%">
      <div style="width: 100%; display: flex;">
        <div style="width: 20%; float: left;">
          <el-table ref="table" v-loading="loading" :data="tableData" height="100%"  v-if="sign===3" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column prop="name" label="区域名称" width="180"></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
                  v-hasPermi="['farm:farmland:edit']"
                >修改
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div style="width: 80%; float: left;">
          <Supermap ref="areaSupermap" style="width: 100%;height:75vh"
                    :mapDiv="uuid" :mapSite="{doubleClickZoom:false}" :codes="['9fa5']"
                    :isSideBySide="false" :showAreaLatLng="showAreaLatLng"></Supermap>
        </div>
      </div>
      <el-button type="primary" @click="closeDialog">确定</el-button>
      <el-button @click="clearAway">清除</el-button>
    </el-dialog>
    <el-dialog :title="(sign===1?'经纬度':(sign===2?'线坐标':'区域坐标'))" :visible.sync="visible" append-to-body
               width="90%"
               height="60%"
               @close='close'>
      <div style="width: 100%; display: flex;">
        <div style="width: 20%; float: left;">
          <el-table ref="table" v-loading="loading" :data="tableData" height="100%"  v-if="sign===3" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column prop="name" label="区域名称" width="180"></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
                  v-hasPermi="['farm:farmland:edit']"
                >修改
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div style="width: 80%; float: left;">
          <supermap ref="supermap" style="width: 100%; height: 75vh;" :putSmUserID_layer="putSmUserID_layer" @showLatLng="showLatLng"></supermap>
        </div>
      </div>
            <el-button type="primary" @click="closeDialog">确定</el-button>
            <el-button @click="clearAway">清除</el-button>
    </el-dialog>


  <el-dialog :title="title" :visible.sync="visibleName" append-to-body  width="400px">
    <el-form ref="obj" :model="obj" :rules="rules" label-width="100px">
      <el-form-item label="区域名称" prop="name">
        <el-input v-model="obj.name" placeholder="请输入区域名称" maxlength="20"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</div>
</template>


<script>
import {getConfigKey} from "@/api/system/config";

import {
  delRegionalFlagByFlagType,
  getRegionalFlag,
  updateInfo,
  updateRegionalFlag
} from '@/api/data/digitalresources/info'
import request from '@/utils/request'
const uuidv4 = require("uuid/v4")
import supermap from '@/views/components/supermap-2.5d';
import Supermap from '@/views/components/supermap';
import { delFarmland, getFarmland, updateFarmland } from '@/api/data/digitalresources/farmland'
export default {
  //多区域的地图
  name: "ISuperMapArearAndCameras",
  components: {supermap, Supermap},
  // created() {
  //
  // },
  data() {
    return {
      // 遮罩层
      loading: true,
      eventId:null,
      visibleName:false,
      id:null,
      arr:[],
      tableData:[],
      cameraMarkersList:[],
      visuForestCloudCameraBOList:[],
      visuForestCloudCameraBOListSearch:[],
      uuid: '',
      sign: undefined,
      title: "",
      visible: false,
      showLongitude: false,
      showLongitudex: false,
      showLongitudeq: false,
      obj: {
        longitude: undefined,
        latitude: undefined,
        xiantude: undefined,
        name:undefined,
      },
      rules: {
        name: [
          {required: true, message: "区域名称不能为空", trigger: "change" }
        ],
      }
    };
  },
  created() {
    this.getRegionalFlag();
  },
  methods: {
    putSmUserID_layer: function (entity) {

    },
    showAreaLatLng: function (latlng) {
      this.obj.xiantude = JSON.stringify(latlng);
    },

    /** 区域标记按钮操作 */
    getRegionalFlag() {
      this.loading = true;
      getRegionalFlag(this.eventId).then(response => {
        this.tableData = response.data;
        this.loading = false;
      })
    },
    //删除
    handleDelete(row){
      this.$modal.confirm('是否确认删除选中的数据项？').then(function () {
        return delRegionalFlagByFlagType(row.eventId,row.flagType);
      }).then(() => {
        this.clearAway();
        this.getRegionalFlag();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    showLatLng: function (val) {
      if (this.sign === 1) {
        this.obj.longitude = val.longitude;
        this.obj.latitude = val.latitude;
      }
      if (this.sign === 2 || this.sign === 3) {
        this.obj.xiantude = JSON.stringify(val.markerList);
      }
    },
    showLL: function (lat, lng) {
      this.obj.latitude = lat;
      this.obj.longitude = lng;
    },
    clearAway(){
      this.$refs.table.clearSelection();
      if (this.showLongitudeq == true) this.$refs.areaSupermap.clearAll();
      if (this.visible == true)this.$refs.supermap.clearAllByQin(this.sign)
      this.obj.xiantude = null;
    },
    initP(sign, form,eventId) {
      getConfigKey('supermapKey').then(response => {
        let isN = response.msg;
        if (isN === 'true') this.visible = true;
        if (isN === 'false') sign === 2 ? this.showLongitudex = true : (sign === 1 ? this.showLongitude = true : this.showLongitudeq = true);
        this.sign = sign;
        this.eventId = eventId
        this.uuid = uuidv4();
        this.$nextTick(() => {
            //2d 点
            if (this.sign === 1 && this.showLongitude === true) {
              setTimeout(() => {
                this.$refs.Supermap.clearM(false);
                if (form.longitude!==null && form.longitude!=='' && form.longitude!==undefined) {
                  this.$refs.Supermap.setMarkers([{lng: form.longitude, lat: form.latitude, icon: "marker"}])
                }
              }, 2000);
            }
            // //2.5d 点
            // if (this.sign === 1 && this.visible === true) {
            //   setTimeout(() => {
            //     this.$refs.supermap.superMapInfo(this.sign, {longitude: form.longitude, latitude: form.latitude});
            //   }, 2000)
            // }
            //2.5d 点
            if (this.sign === 1 && this.visible === true) {
              setTimeout(() => {
                this.$refs.supermap.superMapInfo(this.sign, {longitude: form.longitude, latitude: form.latitude});
              }, 2000);
              setTimeout(() => {
                this.$refs.supermap.loadRoad()
              }, 7000);
            }
            //2.5d 线/区域
            if ((this.sign === 2 && this.visible === true) || (this.sign === 3 && this.visible === true)) {
              // const arr = JSON.parse(form.xiantude == undefined || form.xiantude == null ? "[]" : form.xiantude);
              // console.log(arr)
              this.getRegionalFlag();
              setTimeout(() => {
                this.$refs.supermap.superMapInfo(this.sign, {
                  graphicsList: this.arr && this.arr.length > 0 ? this.arr : [],
                  color: "rgba(250,4,4,0)",
                  withAlpha: 0.8
                },null,undefined,1);
              }, 2000);
            }
            //2d 线
            if (this.sign === 2 && this.showLongitudex === true) {
              const arr = JSON.parse(form.xiantude);
              setTimeout(() => {
                this.$refs.LineSupermap.setConnectList(arr && arr.length > 0 ? arr : [], "#1a1919");
              }, 2000)
            }
            //2d 区域
            if (this.sign === 3 && this.showLongitudeq === true) {
              this.getRegionalFlag();
              // const arr = JSON.parse(form.xiantude);
              setTimeout(() => {
                this.$refs.areaSupermap.setGraphicsList(
                  this.arr && this.arr.length > 0 ? this.arr : [],
                  "#1a1919");
              }, 2000)
            }
          }
        )
      })
    },
    handleSelectionChange(selection) {
      if ((this.sign === 2 && this.visible === true) || (this.sign === 3 && this.visible === true)) {
        this.$refs.supermap.entityHandler(1);
        this.$refs.supermap.setGraphicsList2(selection, "rgba(250,4,4,0)", 0.8);
      }

      if (this.sign === 3 && this.showLongitudeq === true) {
        this.$refs.areaSupermap.clearAll();
        for (let i = 0; i < selection.length; i++) {
          let graphicsList = [];

          for (let j = 0; j < selection[i].latLng.length; j+=2) {
            graphicsList.push({lng:selection[i].latLng[j],lat:selection[i].latLng[j+1]});
          }
          this.$refs.areaSupermap.setGraphicsList(graphicsList, "#1a1919",selection[i].name);
        }
        // this.$refs.areaSupermap.setGraphicsList([{lat:"124",lng:"42"},{lat:"24",lng:"142"},{lat:"11",lng:"42"},{lat:"2",lng:"1"},{lat:"124",lng:"42"}], "#1a1919");
        // this.$refs.areaSupermap.setGraphicsList([{lat:"122.552490234375",lng:"45.78276229037425"},{lat:"131.275634765625",lng:"45.716885087220255"},{lat:"127.96875",lng:"42.53282026811079"},{lat:"122.67333984375",lng:"43.19159229965069"}], "#1a1919");
      }
    },
    submitForm(){
      this.$refs["obj"].validate(valid => {
          if (valid) {
            if (this.id) {
              updateRegionalFlag(this.obj).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.getRegionalFlag();
              });
            } else {
              this.$emit('send', this.obj);
            }
            this.visibleName = false;
            this.clearAway();
            // this.visible = false;
            this.showLongitude = false;
            this.showLongitudex = false;
            // this.showLongitudeq = false;
          }
      });
    },
    cancel(){
      this.obj.name = null;
      this.visibleName = false;
      this.clearAway();
    },
    reset() {
      this.obj.name=null,
      this.resetForm("obj");
    },
        handleUpdate(row) {
        this.reset();
        this.obj.eventId = this.eventId
        this.obj.flagType = row.flagType
        this.id = 1;//修改表标识
        this.visibleName = true;
        this.title = "修改区域标记";
    },
    closeDialog() {
      this.reset();
      this.id = null;
      this.title = "添加区域标记";
      if (this.obj.longitude || (this.obj.xiantude && JSON.parse(this.obj.xiantude).length > 0))this.visibleName = true;
    },
    closeDialogsend() {
      this.$emit('send', 666);
      this.visible = false;
      this.showLongitude = false;
      this.showLongitudex = false;
      this.showLongitudeq = false;
    },
    close() {
      this.$emit('send', true);
      this.visible = false;
      this.showLongitude = false;
      this.showLongitudex = false;
      this.showLongitudeq = false;
    },
  }

};
</script>