hotSpotManage.vue

<template>
  <div class="newDirectory H100">
    <div class="head_box">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/serviceDirectoryPage'}">网点服务地图</el-breadcrumb-item>
        <el-breadcrumb-item>热点管理/{{form.name}}</el-breadcrumb-item>
      </el-breadcrumb>
      <h4>新增网点地图</h4>
    </div>
    <div class="content_box">
      <div class="reject_box" v-show="isShow == 1 || isShow == 6">
        <p><i></i><span>驳回原因:</span>&nbsp;  {{rejectReason}}</p>
      </div>
      <div class="map_content">
        <div class="map_content_left">
          <div class="scrool">
             <div>
              <el-table :data="hotSpotList" stripe style="width: 300px; height:calc(100% - 50px)"
                      @dblclick="toggleSelection(props.row,feature)">
              <el-table-column prop="name" label="热点名称"></el-table-column>
              <el-table-column label="操作" header-align="center" align="center">
                <template slot-scope="scope">
                  <el-button-group>
                    <el-button title="编辑" size="mini" type="text" @click="setMapCenterByFeature(scope.row)">定位 |
                    </el-button>
                    <el-button title="删除" type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                  </el-button-group>
                </template>
              </el-table-column>
            </el-table>
             </div>
          </div>
          <el-button @click="submit" style="float: right;margin: 10px 20px 0 0" size="mini" type="primary">提交</el-button>
        </div>
        <div class="map_content_right">
          <div id="map"></div>
          <div class="btn_group">
            <el-upload class="avatar-uploader" action=" " :show-file-list="false" name="headMap"
                       :before-upload="beforeHeadUpload" :http-request="handleUploadImg"
                       accept="image/gif, image/jpeg, image/png">
              <el-button size="mini" v-if="flag" type="primary" style="padding: 9px 15px;">上传底图</el-button>
            </el-upload>
            <el-button size="mini" v-if="!flag" @click="clearUploadImg" type="primary" style="padding: 9px 15px;">删除底图</el-button>
            <el-button class="button-new-tag" style="margin-left: 10px;" size="small" @click="drawFeature(POINT_TYPE)">添加热点</el-button>
            <el-button class="button-new-tag" size="small"  @click="drawFeature(POLYGON_TYPE)">添加热区</el-button>
          </div>
          <div id="popup" class="ol-popup portlet box">
            <div class="portlet-title">
              <div class="caption">
                <i class="icon icon-info-20"></i>
                <span class="caption-subject" v-show="hotSpot.type == POINT_TYPE">添加热点</span>
                <span class="caption-subject" v-show="hotSpot.type == POLYGON_TYPE">添加热区</span>
              </div>
              <div class="actions">
                <a href="#" id="popup-closer"  class="ol-popup-closer"></a>
              </div>
            </div>
            <div id="popup-content">
              <el-row>
                <el-form ref="form" :model="form" label-width="100px">
                  <el-col :span="24">
                    <el-form-item label="热点名称" v-show="hotSpot.type == POINT_TYPE" prop="name">
                      <el-input placeholder="请输入热点名称" size="mini" v-model="hotSpot.name" class="hotSpotNum"></el-input>
                    </el-form-item>
                    <el-form-item label="热区名称" v-show="hotSpot.type == POLYGON_TYPE" prop="name">
                      <el-input placeholder="请输入热区名称" size="mini" v-model="hotSpot.name" class="hotSpotNum"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" >
                    <el-form-item  label="热点说明" v-show="hotSpot.type == POINT_TYPE">
                    <el-input  type="textarea" size="mini" :rows="2" style="height: 50px;"  placeholder="请输入对该热点的描述"  v-model="hotSpot.note"></el-input>
                    </el-form-item>
                    <el-form-item  label="热区说明" v-show="hotSpot.type == POLYGON_TYPE">
                    <el-input  type="textarea" size="mini" :rows="2" style="height: 50px;"  placeholder="请输入对该热区的描述"  v-model="hotSpot.note"></el-input>
                    </el-form-item>
                    <el-form-item  label="上传图标" v-show="hotSpot.type == POINT_TYPE" >
                      <el-upload class="avatar-uploader" name="headMap"  action="" :show-file-list="false"
                                 :before-upload="beforeAvatarUpload"
                                 :http-request="addPointImage"
                                 accept="image/gif, image/jpg, image/png">
                        <img v-if="hotSpot.imageUrl" :src="hotSpot.imageUrl" class="avatar" style="width: 70px;height: 70px">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div slot="tip" class="el-upload__tip" style="margin-top: -18px;min-width: 240px;">支持.png .jpg 格式, 大小要求 16px*16px</div>
                      </el-upload>
                    </el-form-item>
                    <div style="height:30px;line-height: 30px;text-align: right;padding-right: 10px;margin-top: 10px">
                      <el-button @click="clearFeature" size="mini">取消</el-button>
                      <el-button @click="saveFeature" size="mini" type="primary">保存</el-button>
                    </div>
                  </el-col>
                </el-form>
              </el-row>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style>
  @import '../../js/openlayers/map.css';
  /*@import 'https://openlayers.org/en/v5.2.0/css/ol.css';*/
  @import '../../style/ol.css';

  .el-row.is-align-middle * {
    vertical-align: middle;
  }
</style>
<script>
  import {ColorChange} from '../../js/front/colorChange';
  import {createMap} from '../../js/front/map';
  import {startDataClass} from '../../js/front/getData';
  import {startDraw} from '../../js/front/drawFeature';
  import {FeatureStyle} from '../../js/front/FeatureStyle'
  import {ChangeBaseLayer} from '../../js/front/ChangeBaseLayer';
  import {Measure} from '../../js/tools/Measure';
  import store from '../../store'
  let mapControl;
  let maoObj;
  let drawFeatureObj;
  let editFeatureStyle;
  let changeBaseLayer;
  let measure;

  export default {
    inject: ['reload'],
    data() {
      return {
        rejectReason:"",
        isShow:"",
        flag: true,
        icon: '',
        dialogImageUrl: '',
        dialogVisible: false,
        formLabelWidth: "110px",
        tempImageLayer: null,
        POINT_TYPE: 'Point',
        POLYGON_TYPE: 'Polygon',
        hotSpotList: [],

        hotSpot: {
          id: null,
          type: "",// 1 ,2点还是面
          bankBranchId: null,
          name: "",
          note: "",
          coordinate: "",
          width: "",
          height: "",
          rotationAngle: "",
          imageUrl: ""  //图标地址
        },
        form: {
          id: null,
          name: "",
          imageUrl: '',
          width: '',
          height: '',
          bankQrCode: '',
        },
        inputVisible: false,
        inputValue: '',
      }
    },
    computed: {},
    beforeRouteLeave(to,from,next){
      //判断是否处于编辑状态
      let flag = true;
      if(this.hotSpot.type){
        flag = false;
      }
      if(!flag){
        this.$confirm('检测到未保存的内容，是否离开本页面？', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(() => {
            ///路由不跳转
            sessionStorage.setItem('isModify',false)   //编辑不保留
            store.commit('setLeave',true);             //离开
            next()
          })
          .catch(action => {
            //路由跳转
            sessionStorage.setItem('isModify',true)   //编辑保留
            store.commit('setLeave',false);           //不离开
          });
      }else{
          next()
      }
    },
    mounted() {
      this.init();
    },

    watch:{
      isShow(val){
        if(val != 1 || val != 6){
          $('.map_content').css('height','96%')
          $('.map_content').css('margin-top','20px')
        }else{
          $('.map_content').css('height','calc(100% - 50px)')
          $('.map_content').css('margin-top','0px')
        }
      },
    },
    components: {},
    methods: {
      init() {
        let vm = this;
        vm.getParams();

        let colorChange = ColorChange();
        maoObj = createMap();
        mapControl = startDataClass(maoObj, this);
        drawFeatureObj = startDraw(maoObj, this);
        changeBaseLayer = new ChangeBaseLayer(vm, maoObj);
        measure = new Measure(vm, maoObj);
        editFeatureStyle = new FeatureStyle(this, maoObj);
        editFeatureStyle.setToken(vm.backToken);
        drawFeatureObj.setCilckCallBack(function (type, fe, event) {
          editFeatureStyle.popupWindow(type, event, fe)
        });
        vm.getFeatureList(false);
      },
      // 提交当前热点信息
      submit(){
        let vm = this;
        if(vm.form.imageUrl == ""){
          vm.$message({
            type: 'error',
            message: '当前没有可提交的内容,请添加后再提交！'
          });
        }else{
          vm.$confirm('是否已完成热点编辑, 并提交审核?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            vm.hotSpot.type = '';
            vm.$https({
              url: 'bankBranchInfo/submit?id='+vm.form.id,
              authType: vm.backToken,
              method: 'put'
            }).then((res) => {
              if(res.data.status== 201) {
                vm.$message({
                  type: 'success',
                  message: res.data.message
                });
                vm.$router.push('/serviceDirectoryPage');
              }
            }, (error) => {
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        }
      },
      //获取feature数据信息
      getFeatureList(isResh) {
        let vm = this;
        editFeatureStyle.getFeaturePageByLayerId(this.form.id, {}, function (data) {
          vm.hotSpotList = data;
          if (!isResh) {
            let layerData = {};
            layerData.id = vm.form.id;
            layerData.featureList = data
            vm.addLayerOnView(layerData);
          }

        });

      },

      getParams() {
        let vm = this;
        this.form.id = this.$route.query.pId;
        if (this.form.id) {
          this.hotSpot.bankBranchId = this.form.id;
          vm.$https({
            url: "bankBranchInfo/getById?id=" + this.form.id,
            method: 'get',
            authType: this.backToken
          }, {}).then((res) => {
            if (res.status == 200) {
              vm.form = res.data;
              vm.rejectReason = res.data.rejectReason;
              vm.isShow = res.data.isShow;
              if (vm.form.imageUrl) {
                vm.changeMapBaseLayerMap(vm.form);
              }
            }
          }).catch(function (err) {
          })
        }
      },
      //绘制
      drawFeature(type) {
        let vm = this;
        vm.clearn();
        vm.hotSpot.type = type;
        drawFeatureObj.addInteraction(type, function () {
          editFeatureStyle.closePopupWindow();
        });
      },

      clearn() {
        let vm = this;
        for (let key in  vm.hotSpot) {
          vm.hotSpot[key] = null;
        }
        this.hotSpot.bankBranchId = this.form.id;
      },

      //上传图标大小限制
      beforeAvatarUpload(file) {
        // let _this = this
        const isSize = new Promise(function (resolve, reject) {
          let width = 16;
          let height = 16;
          let _URL = window.URL || window.webkitURL;
          let img = new Image();
          img.onload = function () {
            let valid = img.width == width && img.height == height;
            valid ? resolve() : reject();
          }
          img.src = _URL.createObjectURL(file);
        }).then(() => {
          return file;
        }, () => {
          this.$message({
            type: 'error',
            message: '上传的icon必须是等于16*16!'
          });
          return Promise.reject();
        });
        return isSize
      },

      //上传图标
      addPointImage(file) {
        let vm = this;
        vm.createReader(file.file);
        vm.handleUpload(file.file).then(function (response) {
          vm.hotSpot.imageUrl = response.data.url;
          vm.changeImageStyle();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });

      },

      changeImageStyle() {
        //调用修改属性值方法
        editFeatureStyle.setFeatureStyle();
      },


      //文件上传   地图图片
      handleUploadImg(file) {
        let vm = this;
        if (!vm.form.id && vm.form.id.trim() == "") {
          vm.$message({
            type: 'fail',
            message: "操作失败!"
          });
          return;
        }
        vm.createReader(file.file);
        vm.handleUpload(file.file).then(function (response) {
          vm.form.imageUrl = response.data.url;
          var param = vm.$qs.stringify({
            id: vm.form.id,
            imageUrl: vm.form.imageUrl,
            width: vm.form.width,
            height: vm.form.height
          });
          vm.$https({
            url: 'bankBranchInfo/uploadImage',
            authType: vm.backToken,
            method: 'put'
          }, param).then((res) => {
            console.log(res);
            if(res.data.status== 201) {
              vm.$message({
                type: 'success',
                message: res.data.message
              });
            }
            vm.changeMapBaseLayerMap(response.data);
            vm.flag = false;
          }, (error) => {
          })

        })
      },
      clearUploadImg() {
        let vm = this;
        vm.$confirm('将要清除原有底图, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
        //编辑
          vm.$https({
            url: 'bankBranchInfo/deleteImage?id='+vm.form.id,
            authType: vm.backToken,
            method: 'delete'
          }).then((res) => {
            if(res.data.status== 201) {
              vm.$message({
                type: 'success',
                message: res.data.message
              });
              this.reload();
            }
          }, (error) => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      changeMapBaseLayerMap(data) {
        let extent = [0, 0, Number(this.form.width) / 1000, Number(this.form.height) / 1000,];
        if (data.imageUrl) {
          data.url = data.imageUrl;
          this.flag = false;
        }
        this.tempImageLayer = changeBaseLayer.setImageLayer(extent, data.url, this.tempImageLayer);
        maoObj.setCenterAndZoom([Number(this.form.width) / 2000, Number(this.form.height) / 2000], 9);
      },
      createReader(file) {
        let vm = this;
        var reader = new FileReader;
        reader.onload = function (evt) {
          var image = new Image();
          image.onload = function () {
            var width = this.width;
            var height = this.height;
            vm.form.width = width;
            vm.form.height = height;
          };
          image.src = evt.target.result;
        };
        reader.readAsDataURL(file);
      },

      handleUpload(file) {
        let vm = this;
        let formData = new FormData();
        formData.append("bc_cover", file);
        return new Promise(function (resolve, reject) {
          vm.$https({
            url: 'pic/upload',
            authType: vm.backToken,
            method: 'post'
          }, formData, 'file', 60000).then((res) => {
            resolve(res)
          }, (error) => {
          })
        })
      },
      beforeHeadUpload(file) { //底图文件
        const isLt30M = file.size / 1024 / 1024 < 30;
        if (!isLt30M) {
          this.$message.error('文件大小不能超过 30MB!');
        }
        this.hotSpot.type = 'UPLOAD_IMG';
        return isLt30M;
      },


      openEdit(data) {


      },
      handleDelete(data) {
        let vm = this;
        editFeatureStyle.deleteFeatureFromLayer(data.id, function (res) {
          changeBaseLayer.removeFeatureFromLayer(vm.form.id, data.id);
          vm.getFeatureList(true);
        });
      },
      //热点
      saveFeature() {
        let vm = this;
        if (!this.hotSpot.name || !this.hotSpot.note || this.hotSpot.name == ""|| this.hotSpot.note == "" ) {
          this.$message({
            type: 'error',
            message: '请输入热点或热区名称/说明!'
          });
          return;
        }

        if (/^\s+$/gi.test(this.hotSpot.name) || /^\s+$/gi.test(this.hotSpot.note)) {
          this.$message({
            type: 'error',
            message: '热点或热区名称和说明不能为空!'
          });
          return;
        }
        if(this.hotSpot.name.length > 10 || this.hotSpot.note.length > 100){
          this.$message({
            type: 'error',
            message: '热点或热区名称不超过10个字符，说明不超过100个字符!'
          });
          return;
        }
        if (vm.hotSpot.type == this.POINT_TYPE && (vm.hotSpot.imageUrl == "" || !vm.hotSpot.imageUrl)) {
          //如果是点则必须要加图标
          this.$message({
            type: 'error',
            message: '请上传热点图标!'
          });
          return;
        }
        if(vm.form.imageUrl == ""){
          this.$message({
            type: 'error',
            message: '请先上传底图!'
          });
          return;
        }
        let parameter = this.getParm();
        //保存数据  在相应的图层增加对应的feature 之后刷新列表
        editFeatureStyle.addFeature(parameter, function (res) {
          //succ
          drawFeatureObj.cleanModifyOrDraw();
          editFeatureStyle.closePopupWindow();
          let feData = res.data.data;
          let layer = changeBaseLayer.getLayerClassById(vm.form.id);
          if (layer) {
            layer.removeFeatureById(feData.id);//清除以前的feature  同一图层feature需要唯一
            layer.addfeature(feData);
          }

          vm.getFeatureList(true);
        }, function () {
          //fail

        });
      },
      clearFeature(){
        drawFeatureObj.cleanModifyOrDraw();
        editFeatureStyle.closePopupWindow();
      },
      getParm() {
        let subject = {};
        subject = JSON.parse(JSON.stringify(this.hotSpot));
        subject.coordinate = editFeatureStyle.getWkt();
        subject.bankBranchId = this.form.id;
        return subject;
      },
      cancel() {
        // 清除数据
        let vm = this;
        let modifyFe = editFeatureStyle.getFeature();
        if (modifyFe && modifyFe.getId() && modifyFe.get('data')) {
          //属于修改的部分
          let data = modifyFe.get('data');
          editFeatureStyle.deleteFeatureFromLayer(data.id, data.layerId, function () {
            drawFeatureObj.cleanModifyOrDraw();//删除之后清空绘制的地图  这个方法不需要提示
            editFeatureStyle.closePopupWindow();
            //从图层中移除数据
            changeBaseLayer.removeFeatureFromLayer(data.layerId, data.id);
            vm.$refs.controlPanel.refreshLayerData(data.layerId);
          })
        } else {
          //自定义编辑部分
          drawFeatureObj.cleanAllFeature(function () {
            //关闭弹出框
            editFeatureStyle.closePopupWindow();
          });
        }
      }
      ,
      setMapCenterByFeature(featureItem) {
        changeBaseLayer.getFeatureById(this.form.id, featureItem.id);
      },

      //热点底图
      addLayerOnView(data) {
        let vm = this;
        changeBaseLayer.changeLayerVisable(data, true, function (event, feature, layerName) {
          let modifyArr = drawFeatureObj.getModifyFeature();
          if (modifyArr && modifyArr.length > 0) {
            if (modifyArr[0].getId() == feature.getId()) {
              editFeatureStyle.popupModifyFeature(event, null);//沿用开始I编辑的和后面做区分
            } else {
              //清除以前修改的部分
              drawFeatureObj.remoaveEditFeature(function () {
                //点击确认清除之后
                drawFeatureObj.setEditFeature(feature);
                editFeatureStyle.popupModifyFeature(event, feature);
              });
            }
          } else {
            drawFeatureObj.setEditFeature(feature);
            editFeatureStyle.popupModifyFeature(event, feature);
          }

        });
      },
      getBack() {
        history.back(-1);
      }
    },
  }
</script>

<style lang="less">
  @import '../../style/common';
  .newDirectory {
    .content_box {
      position: relative;
      height: calc(100% - 97px);
      overflow-y: scroll;
      .reject_box{
        width:cale(100% - 40px);
        background: #fff;
        margin: 10px 20px;
        border-radius:4px;
        p{
          padding: 5px;
          i{
            width: 10px;
            height: 10px;
            display: inline-block;
            margin: 0px 10px;
            background: url("../../../static/images/icon/reject.png") no-repeat 100%;
          }
        }
      }
      .map_content {
        height: calc(100% - 50px);
        padding: 0px 20px;
        font-size: 0;
        .map_content_left {
          display: inline-block;
          float: left;
          width: 300px;
          height: 100%;
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
          background-color: #fff;
          .scrool {
            width: 100%;
            height: calc(100% - 48px);
            overflow-x: hidden;
            overflow-y: scroll;
          }
        }
        .map_content_right {
          position: relative;
          display: inline-block;
          width: calc(100% - 300px);
          height: 100%;
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
          background: url("../../../static/images/map-background.jpg");
          #map{
            width: 100%;
            height: 100%;
            background: url("../../../static/images/map-background.jpg") repeat;
            .ol-overlaycontainer-stopevent .ol-overlay-container.ol-selectable{
              #popup { /*窗体*/
                width: 374px;
                /*height: 325px;*/
                .portlet-title{
                  height: 40px;
                  line-height: 40px;
                  padding-left: 10px;
                  background-color: #409EFF;
                  border-bottom: 1px solid #E9E9E9;
                }
                #popup-content {
                  .el-row{
                    .el-form {
                      .el-col-24{
                        padding: 0px 10px;
                      }
                      .el-form-item {
                        margin-bottom: 10px;
                        .el-form-item__content{
                          width: calc(100% - 100px);
                          .avatar-uploader .el-upload {
                            width: 70px;
                            height: 70px;
                            border: 1px dashed #d9d9d9;
                            border-radius: 6px;
                            cursor: pointer;
                            position: relative;
                            overflow: hidden;
                            .el-icon-plus.avatar-uploader-icon {
                              line-height: 5;
                            }
                          }
                        }
                      }
                      .el-input__inner {
                        height: 32px;
                      }
                      .el-upload--picture-card {
                        width: 468px;
                        height: 270px;
                        line-height: 270px;
                      }
                    }
                    .dialog-footer {
                      text-align: center;
                      .el-button {
                        padding: 6px 13px;
                      }
                    }

                  }
                }
              }
            }
          }
          .btn_group {
            position: absolute;
            bottom: 10px;
            right: 20px;
            .avatar-uploader {
              display: inline-block
            }
          }
        }
      }
    }
  }


</style>