auditMap.vue

<template>
  <div class="auditMap">
    <div>
      <div class="head_boxtwo" v-show="this.$route.query.isTitle != 0">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/indexPage'}">首页</el-breadcrumb-item>
          <el-breadcrumb-item>待办事件</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="myBox">
          <div class="headLeft"><h4>待办事件</h4></div>
          <div class="headRight">
            <el-row>
              <el-button class="addButton" type="text" @click="rejectMsg" v-if="rejectShow">驳回</el-button>
              <el-button class="addButton a" type="primary" @click="handleBtnChange($event)">{{appro}}</el-button>
            </el-row>
          </div>
        </div>
        <div class="myMsg">
          <div class="msgLift">
            <el-col :span="9">
              <div class="mymsgTOP">&nbsp;&nbsp;<span class="myColor">创建人：</span><span>{{myName}}</span></div>
              <div><span class="myColor">创建时间：</span><span>{{craetionTime | formatDate}}</span></div>
            </el-col>
            <el-col :span="9">
              <div class="mymsgTOP">&nbsp;&nbsp;<span class="myColor">修改人：</span><span>{{hisName}}</span></div>
              <div><span class="myColor">修改时间：</span><span>{{modifiTime | formatDate}}</span></div>
            </el-col>
            <el-col :span="6" v-if="!rejectShow">
              <div><span class="myColor">驳回原因：</span><span>{{rejectReason}}</span></div>
            </el-col>
          </div>
          <div class="msgRight">
            <div>状态</div>
            <div class="msgRight_top">{{stateNow}}</div>
          </div>
        </div>
      </div>
      <div class="head_boxtwo" v-show="this.$route.query.isTitle == 0">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item >内容管理</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/serviceDirectoryPage'}">网点服务地图</el-breadcrumb-item>
          <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="headLeft"><h4>详情</h4></div>
        <div class="myMsg">
          <div class="msgLift">
            <el-col :span="9">
              <div class="mymsgTOP">&nbsp;&nbsp;<span class="myColor">创建人：</span><span>{{myName}}</span></div>
              <div><span class="myColor">创建时间：</span><span>{{craetionTime | formatDate}}</span></div>
            </el-col>
            <el-col :span="9">
              <div class="mymsgTOP">&nbsp;&nbsp;<span class="myColor">修改人：</span><span>{{hisName}}</span></div>
              <div><span class="myColor">修改时间：</span><span>{{modifiTime | formatDate}}</span></div>
            </el-col>
            <el-col :span="6" v-if="!rejectShow">
              <div><span class="myColor">驳回原因：</span><span>{{rejectReason}}</span></div>
            </el-col>
          </div>
        </div>
      </div>
      <div class="content_boxtwo">
      <div class="form_box h778px">
        <div class="myWord">信息</div>
        <div class="myOnly">
          <div class="myonlyFirst">
            <div><span class="myColor">网点名称：</span><span>{{activity}}</span></div>
          </div>
          <div class="myonlyThird" v-show="this.$route.query.isTitle != 0"><span class="myColor">类别：</span><span>{{category}}</span></div>
        </div>
        <div class="line"></div>
        <div class="myWord">
          <div class="mymap">
            <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-group>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
            <div class="map_content_right">
              <div id="map"></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="90px">
                      <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 == POLYGON_TYPE">
                          <el-input  size="mini" type="textarea" :rows="2"   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" style="height: 70px" action="" :show-file-list="false"
                                     :http-request="addPointImage"
                                     accept="image/gif, image/jpeg, 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>
                          </el-upload>
                        </el-form-item>
                      </el-col>
                    </el-form>
                  </el-row>

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

<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';

  let mapControl;
  let maoObj;
  let drawFeatureObj;
  let editFeatureStyle;
  let changeBaseLayer;
  let measure;

  export default {
    data() {
      return {
        appro: "",
        status: "",
        rejectReason: '',
        rejectShow: true,
        myName: '',
        hisName: '',
        craetionTime: '',
        modifiTime: '',
        stateNow: '',
        blank: '',
        category: '',
        process: '',
        activity: '',
        hotSpot: {
          id: null,
          type: "",// 1 ,2点还是面
          bankBranchId: null,
          name: "",
          note: "",
          coordinate: "",
          width: "",
          height: "",
          rotationAngle: "",
          imageUrl: ""  //图标地址
        },

        tempImageLayer: null,
        POINT_TYPE: 'Point',
        POLYGON_TYPE: 'Polygon',
        hotSpotList: [],
        form: {
          id: null,
          name: "",
          imageUrl: '',
          width: '',
          height: '',
          bankQrCode: '',
        },
      }
    },
    filters: {
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d;
      }
    },
    computed: {},
    mounted() {
      this.init();
    },
    components: {},
    methods: {
      init() {

        let vm = this;

        this.auditEdit();
        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)
        });
      },
      //上传图标
      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: '已取消'
          });
        });

      },
      //获取feature数据信息
      getFeatureList(isResh) {
        let vm = this;
        editFeatureStyle.getFeaturePageByLayerId(this.$route.query.id, {}, function (data) {
          vm.hotSpotList = data;
          if (!isResh) {
            let layerData = {};
            layerData.id = vm.form.id;
            layerData.featureList = data
            vm.addLayerOnView(layerData);
          }

        });

      },

      //绘制
      drawFeature(type) {
        let vm = this;
        vm.clearn();
        vm.hotSpot.type = type;
        drawFeatureObj.addInteraction(type, function () {
          editFeatureStyle.closePopupWindow();
        });
      },
      changeImageStyle() {
        //调用修改属性值方法
        editFeatureStyle.setFeatureStyle();
      },
      rejectMsg() {
        this.$prompt('', '驳回', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPlaceholder: '请输入驳回原因',
          showInput: true
        }).then(({value}) => {
          let _this = this;
          if(!value || value ==" "){
            _this.$message({
              type: 'error',
              message: "驳回理由不能为空！"
            });
          }else{
            let param = {
              id: _this.$route.query.id,
              rejectReason: value,
              status: _this.status,
            };
            _this.$https({
              method: 'put',
              url: 'bankBranchInfo/reject',
              authType: this.backToken
            }, _this.$qs.stringify(param)).then((res) => {
              if (res.data.status == 201) {
                _this.$message({
                  type: 'success',
                  message: res.data.message
                });
                _this.$router.push('/indexPage');
              } else {
                _this.$message({
                  type: 'error',
                  message: res.data.message
                });
              }
              }, (error) => {
                console.log(error)
              }
            )
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      handleBtnChange (ev) {
        let btnName = ev.currentTarget.innerText;
        switch (btnName) {
          case '通过(上线)':
            this.passMsg();
            break;
          case '通过(下线)':
            this.passMsg();
            break;
          case '重新编辑':
            this.$router.push({
              path: '/hotSpotManage',
              query:{pId: this.$route.query.id}
            });
            break;
          case '再次申请下线':
            this.handleLine();
            break;
          default:
            break;
        }
      },
      passMsg() {
        let _this = this;
        let param = {
          id: _this.$route.query.id,
          status: _this.status,
        };
        _this.$https({
          method: 'put',
          url: 'bankBranchInfo/approved',
          authType: this.backToken
        }, _this.$qs.stringify(param)).then((res) => {
            if (res.data.status == 201) {
              _this.$message({
                type: 'success',
                message: res.data.message
              });
              _this.$router.push('/indexPage');
            } else {
              _this.$message({
                type: 'error',
                message: res.data.message
              });
            }
          }, (error) => {
            console.log(error)
          }
        )
      },
      handleLine() {
        let _this = this;
          this.$confirm('是否再次申请下线当前网点服务地图?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            _this.$https({
              method: 'put',
              url: 'bankBranchInfo/applyOffline?id='+ _this.$route.query.id,
              authType: this.backToken
            }).then((res) => {
                _this.onSearch();
                if(res.data.status == 201){
                  this.$message({
                    type: 'success',
                    message: res.data.message
                  });
                  _this.$router.push('/indexPage');
                }
              }, (error) => {
                this.$message({
                  type: 'fail',
                  message: res.data.message
                });
              }
            )
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消此操作'
            });
          });


      },
      auditEdit() {
        this.category = this.$route.query.typeName;
        let _this = this;
        let param = {id: _this.$route.query.id};
        _this.$https({
          method: 'get',
          url: 'bankBranchInfo/getById',
          authType: this.backToken
        }, param).then((res) => {
          if (res.status == 200) {
            _this.form = res.data;
            if (_this.form.imageUrl) {
              _this.changeMapBaseLayerMap(_this.form);
            }
            _this.getFeatureList(false); //先根据id 去获取基本信息 然后再根据id 获取热点列表
          }
          if (res.data.isShow == 2) {
            _this.appro = "通过(上线)";
            _this.stateNow = "审批上线";
          } else if (res.data.isShow == 3) {
            _this.appro = "通过(下线)";
            _this.stateNow = "审批下线";
          }else if(res.data.isShow == 1) {
            _this.appro = "重新编辑";
            _this.stateNow ="上线被驳回";
            _this.rejectShow = false;
          }else if(res.data.isShow == 6) {
            _this.appro = "再次申请下线";
            _this.stateNow ="下线被驳回";
            _this.rejectShow = false;
          }
           _this.status = res.data.isShow;
            _this.activity = res.data.name;
            _this.blank = res.data.name;
            _this.craetionTime = res.data.createTime;
            _this.modifiTime = res.data.updateTime;
            _this.myName = res.data.creatorName;
            _this.hisName = res.data.modifierName;
            _this.process = res.data.headImage;
            _this.rejectReason = res.data.rejectReason
          if (res.data.imageUrl) {
              _this.changeMapBaseLayerMap(_this.form);
            }
          }, (error) => {
            console.log(error)
          }
        )
      },
      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);
      },
      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.$route.query.id, featureItem.id);
      },
      //热点底图
      addLayerOnView(data) {
        let vm = this;
        changeBaseLayer.changeLayerVisable(data, true, function (event, feature, layerName) {
          editFeatureStyle.popupModifyFeature(event, feature);//沿用开始I编辑的和后面做区分
        });
      },

    },
  }
</script>

<style lang="less">
  @import '../../style/common';

  .auditMap {
    width: 100%;
    height: calc(100% - 0px);
    overflow-x: hidden;
    overflow-y: scroll;
    .head_boxtwo {
      padding: 20px 30px 20px 20px!important;
      h6 {
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
        padding: 5px 0px 13px;
      }
      h4 {
        font-size: 20px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
      }
      .myBox {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .headLeft {
          width: 10%;
        }
        .headRight {
          .el-button--text {
            color: rgba(0, 0, 0, 0.6);
            border: 1px solid #dcdfe6;
          }
          .addButton {
            width: 47px;
            height: 26px;
            padding: 0;
            text-align: center;
            line-height: 26px;
            font-size: 23px;
          }
          .addButton.a {
            width: 85px;
          }
          .el-button {
            text-align: center;
            font-size: 12px;
            line-height: 20px;
          }
          .el-button span {
            font-size: 12px;
          }
        }
      }
      .myMsg {
        width: 100%;
        margin-top: 18px;
        display: flex;
        justify-content: space-between;
        .msgLift {
          width: 80%;
          display: flex;
          justify-content: space-between;
          .myColor {
            display: inline-block;
            color: black;
            width: 70px;
            text-align: right;
          }
          .mymsgTOP {
            margin-bottom: 10px;
            span.myColor {
              width: 63px;
            }
          }
        }
        .msgRight {
          text-align: right;
          div {
            font-size: 14px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.45);
          }
          div.msgRight_top {
            margin-top: 5px;
            font-size: 16px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
          }
        }
      }
    }
    .content_boxtwo {
      width: 100%;
      height: 100%;
      background: #F0F2F5;
      /*padding: 24px 24px 0;*/
      border: 1px solid transparent;
      .form_box {
        margin-bottom: 0px;
        background: #fff;
        .myWord {
          font-weight: 600;
          font-size: 18px;
          .mymap{
            height: 500px;
            width: 100%;
            .map_content_left {
              display: inline-block;
              float: left;
              width: 300px;
              height: calc(100% - 20px);
              border-top-left-radius: 4px;
              border-bottom-left-radius: 4px;
              background-color: #fff;
              .scrool {
                width: 100%;
                height: 100%;
                overflow-x: hidden;
                overflow-y: scroll;
              }
            }
            .map_content_right {
              position: relative;
              display: inline-block;
              width: calc(100% - 300px);
              height: calc(100% - 20px);
              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: 240px;*/
                    background: #fff;
                    border-radius: 4px;
                    .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 20px 10px;
                          }
                          .el-col-24:nth-child(1){
                            padding-top: 10px;
                          }
                          .el-form-item {
                            margin-bottom: 10px;
                            width: 100%;
                            .el-form-item__content{
                              width: calc(100% - 90px);
                              .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;
                          }
                        }

                      }
                      /*.el-input-number--mini {*/
                      /*width: 105px;*/
                      /*}*/
                      /*.el-input-number--mini .el-input-number__decrease, .el-input-number--mini .el-input-number__increase {*/
                      /*height: 30px;*/
                      /*}*/


                      /*.el-row .el-form .el-col .el-form-item .el-form-item__content{*/
                      /*width: 70%;*/
                      /*}*/


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

        }
        .myOnly {
          width: 80%;
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
          .myColor {
            color: black;
          }
          .myonlyFirst {
            .myfirstOne {
              margin-top: 20px;
              display: flex;
              align-items: center;
              .myImg {
                width: 100px;
                height: 100px;
              }
            }
          }
          .myonlySecond {
            .myfirstOneoo {
              margin-top: 15px;
            }

            .myColortwo {
              display: inline-block;
              width: 80px;
              height: 16px;
            }
          }
          .myonlyThird {
            .myonlyThirdone {
              margin-top: 20px;
              .myColoro {
                color: #0000cc;
              }
            }
          }
        }
        .line {
          width: 100%;
          height: 1.5px;
          background: #eeeeee;
          margin-top: 10px;
        }
      }

    }

  }


</style>