dm-manage-web/src/views/sch/place/index.vue

<template>
  <div class="amap-page-container">
    <div id="map" class="amap-cavans" />
    <el-input id="search" v-model="searchBody" class="search-body" placeholder="请输入..." @keyup.enter.native="submitSearch">
      <el-button slot="append" icon="el-icon-search" @click="submitSearch" />
    </el-input>
    <div class="asider" :class="showSchool ? '':'hidden-school'">
      <el-card class="box-card" :body-style="{ flex: 1,'overflow-y': 'scroll', padding: 0 }">
        <div slot="header" class="clearfix">
          <div class="map-card-title">驾校列表</div>
        </div>
        <div v-for="school in schoolList" :key="school.schoolId" style="margin:10px;" :class="currentdeptId == school.schoolId?'actived-school':''">
          <el-card :body-style="{ padding: '10px' }">
            <div slot="header" class="clearfix">
              <div class="map-card-title">{{ school.schoolName }}</div>
              <el-switch v-model="school.showInMap" v-hasPermi="['sch:place:edit']" class="add-icon" active-text="展示" inactive-text="隐藏" @change="changeSchoolStatus(school)" />
            </div>
            <el-button @click="handleClickSchool(school)">{{ `数据管理(${getCount(school.schoolId)})` }}</el-button>
            <el-tooltip v-hasPermi="['sch:place:add']" content="新增场地" placement="left" effect="dark">
              <el-button icon="el-icon-plus" class="add-place-btn" @click="handleInsertPlace(school.schoolId)" />
            </el-tooltip>
          </el-card>
        </div>
      </el-card>
      <div class="asider-sub">
        <el-tooltip content="放大" placement="left" effect="dark">
          <el-button icon="el-icon-plus" class="is-circle" :disabled="zomm >= 18" @click="bigger" />
        </el-tooltip>
        <el-tooltip content="缩小" placement="left" effect="dark">
          <el-button icon="el-icon-minus" class="is-circle" :disabled="zomm <= 8" @click="smaller" />
        </el-tooltip>
        <div class="mt10">
          <el-tooltip content="驾校" placement="left" effect="dark">
            <el-button icon="el-icon-school" class="is-circle" @click="toggleSchool" />
          </el-tooltip>
          <el-tooltip content="定位" placement="left" effect="dark">
            <el-button icon="el-icon-help" class="is-circle" @click="geolocation" />
          </el-tooltip>
          <el-tooltip content="测距" placement="left" effect="dark">
            <el-button icon="el-icon-thumb" class="is-circle" @click="ranging" />
          </el-tooltip>
          <el-tooltip content="分享" placement="left" effect="dark">
            <el-button icon="el-icon-share" class="is-circle" />
          </el-tooltip>
        </div>
      </div>
    </div>
    <el-card v-if="placeDialogShow" class="place-dialog" :body-style="{ padding: '10px' }">
      <div slot="header" class="clearfix">
        <div class="map-card-title">场地设置</div>
        <el-tooltip content="取点" placement="right" effect="dark">
          <el-button icon="el-icon-location" class="add-icon" @click="getPoint" />
        </el-tooltip>
      </div>
      <el-form ref="placeForm" :model="placeForm" label-width="70px">
        <el-form-item label="所属驾校" prop="schoolId">
          <el-select v-model="placeForm.schoolId" placeholder="请选择" clearable>
            <el-option v-for="dict in schoolList" :key="dict.schoolId" :label="dict.schoolName" :value="dict.schoolId" />
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="placeForm.name" placeholder="输入名称" />
        </el-form-item>
        <el-form-item label="旗子颜色" prop="flagColor">
          <el-radio-group v-model="placeForm.flagColor">
            <el-radio v-for="(item, index) in colorOptions" :key="index" :label="item">
              <img :src="require(`@/assets/images/place/flag_${item}.png`)" width="20px">
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="placeForm.address" placeholder="输入地址" />
        </el-form-item>
        <el-form-item label="经度" prop="lng">
          <el-input v-model="placeForm.lng" placeholder="输入经度" />
        </el-form-item>
        <el-form-item label="纬度" prop="lat">
          <el-input v-model="placeForm.lat" placeholder="输入纬度" />
        </el-form-item>
        <el-form-item label="所属区域" prop="area">
          <el-select v-model="placeForm.area" placeholder="请选择" clearable size="small">
            <el-option v-for="dict in areaOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="placeForm.phone" placeholder="输入电话" />
        </el-form-item>
        <el-form-item label="负责人" prop="contact">
          <el-input v-model="placeForm.contact" placeholder="输入负责人" />
        </el-form-item>
        <el-form-item label="是否推荐" prop="contact">
          <el-radio v-model="placeForm.recommend" :label="true">是</el-radio>
          <el-radio v-model="placeForm.recommend" :label="false">否</el-radio>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="placeForm.remark" placeholder="输入备注" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" />
        </el-form-item>
        <el-form-item style="text-align:right;">
          <el-button v-hasPermi="['sch:place:edit']" type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="closePlaceDialog">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card :class="placeListDialogShow ? '':'hidden-place-list'" class="place-list-dialog" :style="{ right: showSchool ? '300px' : '0', top : fullScreenPlaceList?'0px':'420px' }" :body-style="{ padding: '10px', height: 'calc(100% - 52px)' }">
      <div slot="header" class="clearfix">
        <div class="map-card-title">
          {{ placeListDialogTitle }}
          <el-input v-model="tableSearch" placeholder="请输入搜索的内容" clearable />
        </div>
        <el-tooltip content="全屏" placement="top" effect="dark">
          <el-button icon="el-icon-full-screen" class="add-icon" @click="fullScreenPlaceList = !fullScreenPlaceList" />
        </el-tooltip>
        <el-tooltip content="关闭" placement="top" effect="dark">
          <el-button icon="el-icon-close" class="add-icon" @click="() => { placeListDialogShow = false;fullScreenPlaceList = false }" />
        </el-tooltip>
      </div>
      <el-table :data="placeTableData" border stripe class="place-table-list" height="100%">
        <el-table-column label="序号" type="index" fixed="left" width="50" />
        <el-table-column prop="name" label="名称" min-width="100" />
        <el-table-column prop="phone" label="电话" width="120" />
        <el-table-column prop="contact" label="负责人" width="120" />
        <el-table-column prop="address" label="地址" min-width="100" />
        <el-table-column prop="lng" label="经度" width="110" />
        <el-table-column prop="lat" label="纬度" width="110" />
        <el-table-column prop="area" label="所属区域" width="110" />
        <el-table-column label="展示" width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.showInMap" v-hasPermi="['sch:place:edit']" @change="changePlaceStatus(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-tooltip v-hasPermi="['sch:place:edit']" content="编辑" placement="top" effect="dark">
              <el-button icon="el-icon-edit" type="primary" style="padding: 4px 8px;" @click="handleEditPlace(scope.row)" />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <div v-if="isPointing || isRanging" class="map-tip" :style="{ transform: 'translate3D(' + (tipPostion.x + 15) +'px,' + (tipPostion.y - 10) + 'px, 0)' }">{{ mapHelpText }}</div>
    <i v-if="isPointing" class="el-icon-s-flag circle" :style="{ transform: 'translate3D(' + tipPostion.x +'px,' + tipPostion.y + 'px, 0)' }" />
  </div>
</template>
<!-- eslint-disable no-undef -->
<script>
import { getMapData, addPlace, updatePlace, updateSchoolStatus } from '@/api/sch/place';
export default {
  name: 'Place',
  data() {
    return {
      aMap: null,
      zomm: 12,
      showSchool: true,
      isRanging: false,
      aMapLocation: null,
      aMouseTool: null,
      searchBody: '',
      placeSearch: null,
      placeDialogShow: false,
      isPointing: false,
      placeForm: {
        lat: undefined,
        lng: undefined,
        name: undefined,
        address: undefined,
        remark: undefined,
        phone: undefined,
        flagColor: 'red'
      },
      colorOptions: ['red', 'yellow', 'blue', 'green', 'purple', 'black'],
      mapHelpText: '',
      tipPostion: {
        x: 0,
        y: 0
      },
      geocoder: null,
      locationMarker: null,
      selectMarker: null,
      placeListDialogShow: false,
      placeListDialogTitle: '',
      fullScreenPlaceList: false,
      tableSearch: '',
      tableData: [],
      schoolList: [],
      currentdeptId: undefined,
      placeMarkerList: [],
      areaOptions: []
    };
  },
  computed: {
    placeTableData: function () {
      if (this.tableSearch) {
        return this.tableData.filter((dataNews) => {
          return (
            dataNews.schoolId === this.currentdeptId &&
            Object.keys(dataNews).some((key) => {
              return String(dataNews[key]).toLowerCase().indexOf(this.tableSearch) > -1;
            })
          );
        });
      }
      return this.tableData.filter((dataNews) => dataNews.schoolId === this.currentdeptId);
    }
  },
  mounted() {
    this.initMap();
    this.getDicts('dm_area').then((response) => {
      this.areaOptions = response.data;
    });
  },
  methods: {
    initMap() {
      window.onLoad = () => {
        this.aMap = new AMap.Map('map', {
          zoom: this.zomm,
          center: [117.226095, 31.814372],
          zooms: [8, 18]
        });
        // 监听缩放
        this.aMap.on('zoomend', () => {
          this.zomm = this.aMap.getZoom();
          this.$message('当前缩放等级:' + this.zomm);
        });
        // 监听点击
        this.aMap.on('click', (ev) => {
          if (this.isPointing) {
            this.placeForm.lat = ev.lnglat.lat;
            this.placeForm.lng = ev.lnglat.lng;
            this.regeoCode();
            if (this.selectMarker) {
              this.selectMarker.setPosition([this.placeForm.lng, this.placeForm.lat]);
            } else {
              this.locationMarker.setPosition([this.placeForm.lng, this.placeForm.lat]);
              this.aMap.add(this.locationMarker);
            }
            this.isPointing = false;
          }
        });
        // 监听移动
        this.aMap.on('mousemove', (ev) => {
          if (this.isRanging) {
            this.mapHelpText = '左键单击选点，双击/右键单击完成选点，再次点击测距按钮可退出测距模式，并清除测距结果';
            this.tipPostion = {
              x: ev.pixel.x,
              y: ev.pixel.y
            };
          } else if (this.isPointing) {
            this.mapHelpText = '点击地图添加标注';
            this.tipPostion = {
              x: ev.pixel.x,
              y: ev.pixel.y
            };
          }
        });
        // 添加地图插件
        AMap.plugin(['AMap.Scale', 'AMap.Geolocation', 'AMap.MouseTool', 'AMap.PlaceSearch', 'AMap.Autocomplete', 'AMap.Geocoder'], () => {
          this.aMap.addControl(new AMap.Scale());
          const geoLoca = new AMap.Geolocation({
            showButton: false
          });
          this.aMapLocation = geoLoca;
          this.aMap.addControl(geoLoca);
          this.aMouseTool = new AMap.MouseTool(this.aMap);
          const auto = new AMap.Autocomplete({
            input: 'search' // 前端搜索框
          });
          this.placeSearch = new AMap.PlaceSearch({
            map: this.aMap
          });
          AMap.event.addListener(auto, 'select', this.select);
          this.geocoder = new AMap.Geocoder();
          this.locationMarker = new AMap.Marker({
            icon: require(`@/assets/images/place/flag_red.png`)
          });
        });
        this.getPageData();
      };
      this.importMap();
    },
    // 导入地图
    importMap() {
      const url = 'https://webapi.amap.com/maps?v=1.4.15&key=f2f35d6adc4a16bb879d303cead56237&callback=onLoad';
      var jsapi = document.createElement('script');
      jsapi.charset = 'utf-8';
      jsapi.src = url;
      document.head.appendChild(jsapi);
    },
    toggleSchool() {
      this.showSchool = !this.showSchool;
    },
    // 经纬度 -> 地址
    regeoCode() {
      this.geocoder.getAddress([this.placeForm.lng, this.placeForm.lat], (status, result) => {
        if (status === 'complete' && result.regeocode) {
          this.placeForm.address = result.regeocode.formattedAddress;
        } else {
          console.log('根据经纬度查询地址失败');
        }
      });
    },
    // 定位
    geolocation() {
      this.aMapLocation.getCurrentPosition();
    },
    // 测距
    ranging() {
      this.isPointing = false;
      this.isRanging = !this.isRanging;
      if (this.isRanging) {
        this.aMap.setDefaultCursor('crosshair');
        this.drawLine();
      } else {
        this.aMap.setDefaultCursor('default');
        this.aMouseTool.close(true);
      }
    },
    // 画线
    drawLine() {
      this.aMouseTool.rule({
        startMarkerOptions: {
          // 可缺省
          icon: new AMap.Icon({
            size: new AMap.Size(19, 31), // 图标大小
            imageSize: new AMap.Size(19, 31),
            image: 'https://webapi.amap.com/theme/v1.3/markers/b/start.png'
          })
        },
        endMarkerOptions: {
          // 可缺省
          icon: new AMap.Icon({
            size: new AMap.Size(19, 31), // 图标大小
            imageSize: new AMap.Size(19, 31),
            image: 'https://webapi.amap.com/theme/v1.3/markers/b/end.png'
          }),
          offset: new AMap.Pixel(-9, -31)
        },
        midMarkerOptions: {
          // 可缺省
          icon: new AMap.Icon({
            size: new AMap.Size(19, 31), // 图标大小
            imageSize: new AMap.Size(19, 31),
            image: 'https://webapi.amap.com/theme/v1.3/markers/b/mid.png'
          }),
          offset: new AMap.Pixel(-9, -31)
        },
        lineOptions: {
          // 可缺省
          strokeStyle: 'solid',
          strokeColor: '#FF33FF',
          strokeOpacity: 1,
          strokeWeight: 2
        },
        tmpLineOptions: {
          strokeStyle: 'dashed',
          strokeColor: '#FF33FF',
          strokeOpacity: 1,
          strokeWeight: 2
        }
      });
    },
    // 选择查询结果
    select(e) {
      this.placeSearch.setCity(e.poi.adcode);
      this.placeSearch.search(e.poi.name); // 关键字查询查询
    },
    // 查询按钮/回车事件
    submitSearch() {
      this.placeSearch.search(this.searchBody);
    },
    // 缩放
    bigger() {
      this.zomm++;
      this.aMap.setZoom(this.zomm);
    },
    smaller() {
      this.zomm--;
      this.aMap.setZoom(this.zomm);
    },

    // 点击数据管理
    handleClickSchool(item) {
      this.placeListDialogShow = true;
      this.placeListDialogTitle = `数据管理 [${item.schoolName}]`;
      this.currentdeptId = item.schoolId;
    },
    // 新增场地
    handleInsertPlace(schoolId) {
      if (this.selectMarker) {
        this.selectMarker.setAnimation('AMAP_ANIMATION_NONE');
        this.selectMarker = null;
      }
      this.placeDialogShow = true;
      this.aMap.setDefaultCursor('default');
      this.isRanging = false;
      this.placeForm = {
        lat: undefined,
        lng: undefined,
        name: undefined,
        address: undefined,
        remark: undefined,
        phone: undefined,
        schoolId: schoolId,
        showInMap: true,
        flagColor: 'red'
      };
    },
    // 编辑场地
    handleEditPlace(item) {
      this.placeDialogShow = true;
      this.aMap.setDefaultCursor('default');
      if (this.selectMarker) {
        this.selectMarker.setAnimation('AMAP_ANIMATION_NONE');
      }
      this.isRanging = false;
      this.placeForm = Object.assign({}, item);
      this.selectMarker = this.placeMarkerList.filter((marker) => marker.getExtData().placeId === item.placeId)[0];
      this.selectMarker && this.selectMarker.setAnimation('AMAP_ANIMATION_BOUNCE');
      this.aMap.setCenter([item.lng, item.lat]);
    },
    getPoint() {
      this.isPointing = !this.isPointing;
    },
    // 保存
    async onSubmit() {
      // 保存接口
      if (this.checkPlaceFormValidate()) {
        // 先访问接口，返回id插入placeForm
        const resp = this.savePlace(this.placeForm);
        if (resp.code != 200) {
          return;
        } else {
          this.$message.success('操作成功');
        }
        if (!this.placeForm.placeId && resp.data) {
          this.$set(this.placeForm, 'placeId', resp.data);
        }
        // 移除选点用 的标记
        this.aMap.remove(this.locationMarker);
        // 根据form创建新marker 并添加到地图上
        const tmpMarker = new AMap.Marker({
          map: this.aMap,
          position: [this.placeForm.lng, this.placeForm.lat],
          icon: require(`@/assets/images/place/flag_${this.placeForm.flagColor}.png`),
          label: {
            content: this.placeForm.name,
            direction: 'right'
          },
          extData: this.placeForm
        });
        // 新marker事件
        tmpMarker.on('click', this.handleClickMarker);
        // 如果当前选择的marker点存在（编辑）
        if (this.selectMarker) {
          // 地图上 移除选择的点
          this.aMap.remove(this.selectMarker);
          this.selectMarker = null;
        }
        // 关闭场地弹窗
        this.placeDialogShow = false;
        this.isPointing = false;

        // 场地列表 移除原列表中操作的场地数据
        const tmpArr = this.tableData.filter((item) => item.placeId !== this.placeForm.placeId);
        // 新增新的场地
        tmpArr.push(this.placeForm);
        // 重置场地数组
        this.tableData = tmpArr;
        // 地图marker列表 移除操作的原marker 添加新marker进数组
        const tmpArr1 = this.placeMarkerList.filter((item) => item.getExtData().placeId !== this.placeForm.placeId);
        tmpArr1.push(tmpMarker);
        this.placeMarkerList = tmpArr1;
      }
    },
    async savePlace(item) {
      if (item.placeId) {
        return updatePlace(item);
      } else {
        return addPlace(item)
      }
    },
    checkPlaceFormValidate() {
      const valid = [];
      if (!this.placeForm.name) {
        valid.push('名称');
      }
      if (!this.placeForm.address) {
        valid.push('地址');
      }
      if (!this.placeForm.lng) {
        valid.push('经度');
      }
      if (!this.placeForm.lat) {
        valid.push('纬度');
      }
      if (!this.placeForm.phone) {
        valid.push('电话');
      }
      if (valid.length == 0) {
        return true;
      } else {
        this.$message.error(`请将以下填写完整: ${valid.join(',')}`);
        return false;
      }
    },
    // 关闭场地弹窗
    closePlaceDialog() {
      this.placeDialogShow = false;
      this.isPointing = false;
      this.aMap.remove(this.locationMarker);
      if (this.selectMarker) {
        this.selectMarker.setAnimation('AMAP_ANIMATION_NONE');
        this.selectMarker = null;
      }
    },
    handleClickMarker(ev) {
      if (this.selectMarker) {
        this.selectMarker.setAnimation('AMAP_ANIMATION_NONE');
      }
      this.placeForm = ev.target.getExtData();
      this.placeDialogShow = true;
      ev.target.setAnimation('AMAP_ANIMATION_BOUNCE');
      this.selectMarker = ev.target;
    },
    getPageData() {
      getMapData().then((resp) => {
        if (resp.code == 200) {
          this.schoolList = resp.data.schoolList;
          this.tableData = resp.data.placeList;
          this.currentdeptId = this.schoolList[0].schoolId;
          this.createMarkersInMap();
        }
      });
    },
    getCount(schoolId) {
      return this.tableData.filter((item) => item.schoolId === schoolId).length;
    },
    // 重置markers
    resetMarkers() {
      this.aMap.clearMap();
      this.createMarkersInMap();
    },
    // 生成markers
    createMarkersInMap() {
      for (let i = 0; i < this.tableData.length; i++) {
        const element = this.tableData[i];
        const tempSchool = this.schoolList.filter((item) => item.schoolId === element.schoolId)[0];
        if (!tempSchool.showInMap || !element.showInMap) {
          continue;
        }
        const tmpMarker = new AMap.Marker({
          map: this.aMap,
          position: [element.lng, element.lat],
          icon: require(`@/assets/images/place/flag_${element.flagColor}.png`),
          label: {
            content: element.name,
            direction: 'right'
          },
          extData: element
        });
        tmpMarker.on('click', this.handleClickMarker);
        this.placeMarkerList.push(tmpMarker);
      }
    },
    // 修改驾校状态
    changeSchoolStatus(item) {
      // 访问接口，成功后重置markers
      updateSchoolStatus(item).then((resp) => {
        if (resp.code == 200) {
          this.$message.success('操作成功');
          // this.aMap.clearMap()
          // this.getPageData()
          this.resetMarkers();
        }
      });
    },
    // 修改场地状态
    async changePlaceStatus(item) {
      const resp = await updatePlace(item);
      if (resp.code == 200) {
        this.resetMarkers();
      }
    }
  }
};
</script>

<style scoped>
.amap-page-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.amap-cavans {
  width: 100%;
  height: 100%;
}

.asider {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
  height: 100%;
  transition: 0.3s;
  z-index: 9;
}

.box-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

::v-deep .el-card__header {
  padding: 10px 15px;
}

.clearfix {
  display: flex;
}

.clearfix .map-card-title {
  flex: 1;
  line-height: 30px;
}

.clearfix .add-icon {
  width: auto;
  height: 30px;
}

.asider-sub {
  position: absolute;
  top: 40px;
  left: -45px;
  padding: 10px 10px 0 0;
  z-index: 900;
}

.asider-sub .is-circle {
  display: block;
  margin: 0;
  padding: 10px;
  color: #464646;
  border-radius: 0;
  font-size: 16px;
  box-shadow: 2px 2px 2px rgba(80, 80, 80, 0.67);
}

.mt10 {
  margin-top: 10px;
}

.hidden-school {
  transform: translateX(300px);
}

.search-body {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 400px;
}

.add-place-btn {
  float: right;
  border: none;
  font-size: 16px;
  color: #409eff;
}

::v-deep .place-dialog {
  position: absolute;
  left: 20px;
  top: 60px;
  width: 350px;
}

.map-tip {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 150px;
  padding: 5px;
  border-radius: 2px;
  background: #000;
  color: #fff;
  opacity: 0.7;
  font-size: 12px;
  transition-duration: 1ms;
}

.circle {
  position: absolute;
  left: -8px;
  top: -25px;
  font-size: 24px;
  color: red;
  transition-duration: 1ms;
}

.place-dialog .el-form .el-form-item {
  margin-bottom: 8px;
}

.place-list-dialog {
  position: absolute;
  top: 420px;
  left: 0;
  bottom: 0;
  transition: 0.3s;
  z-index: 151;
  background: #e2e5ea;
}

.place-list-dialog .add-icon {
  font-size: 18px;
  border: none;
}

.hidden-place-list {
  transform: translateY(100%);
}

.place-list-dialog .clearfix .map-card-title {
  font-weight: bold;
}

.place-list-dialog .clearfix .map-card-title .el-input {
  margin-left: 20px;
  width: 240px;
}

.actived-school {
  border: 2px solid #409eff !important;
}
::v-deep .el-radio__label {
  vertical-align: middle;
}
</style>