index.vue

<template>
  <div class="manage-container clerk-wrapper">
    <el-row class="manage-head-wrapper">
      <el-col :span="20">
        <!-- 广场 -->
        <div class="manage-select-box">
          <el-select v-model="mallVal" class="mall-opt" filterable placeholder="楼层" @change="chooseMall(mallVal)">
            <el-option v-for="item in mallOpt" :label="item.name" :value="item.id" :key="item.value"></el-option>
          </el-select>
        </div>
        <!-- 楼层选择 -->
        <div class="manage-select-box floor-box">
          <el-select v-model="floorValue" filterable :placeholder="$t('pholder.floorSelect')" @change="chooseFloor(floorValue)">
            <el-option v-for="item in floorList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </div>
        <el-button type="primary" class="search-btn" plain size="mini" @click="searchFun">{{$t('button.search')}}
        </el-button>
      </el-col>
      <!-- <el-col :span="4">
        <el-button style="float:right" type="primary" class="search-btn" plain size="mini" @click="saveData">保存并应用
        </el-button>
      </el-col> -->
    </el-row>
    <el-row class="manage-content" v-loading="loading">
        <div class="gateWrap" id="gateManage">
            <img :src="floorImg" class="fimg" @load="loadGateData">
            <div class="grender" ref="gRender"></div>
        </div>
    </el-row>
  </div>
</template>

<script>
import defaultImg from "@/assets/img/manage/defaultFloor.svg";
import _ from 'underscore';
import zrender from 'zrender';
import xyImg from '@/assets/img/manage/xy.png'
export default {
  data() {
    return {
      floorList: [],
      floorValue: '',
      currShopObj: {},
      mallName: "",
      mallVal: null,
      mallOpt: [],
      gateData: [],
      floorImg: '',
      loading: true,
      width:0,
      height:0,
      groupList:[],
      gateList:[],
    };
  },
  mounted() {
    this.getMallList();
  },
  methods: {
    // 保存
    saveData() {
       let posList = _.map(this.groupList,item=>{
           let position = item.position;
           return {
               id:item.gateId,
               x:Math.round(position[0]*100/this.width),
               y:Math.round(position[1]*100/this.height)
           }
       });
    },
    setGatePos(group){
        let {position,gateId} = group;
        let gitem = _.findWhere(this.gateList,{id:gateId});
        let [x,y] = [Math.round(position[0]*100/this.width),Math.round(position[1]*100/this.height)];
        if(gitem.x!=x||gitem.y!=y){
            gitem.x = x;
            gitem.y = y;
            this.$api.management.editGate(gateId,gitem).then(res=>{
                
            })
        }
    },
    loadGateData(){
        let {width,height} = document.getElementById('gateManage').getBoundingClientRect();
        this.width = width;
        this.height = height;
        this.groupList = [];
        this.zr = zrender.init(this.$refs.gRender, {
            renderer: 'canvas',
            devicePixelRatio: 2,
            width: width,
            height: height
        });
        this.$api.management.gateFilterList({
            mallId:this.mallVal,
            floorId:this.floorValue
        }).then(res=>{
            this.loading = false;
            this.restoreGate(res.data.data);
        })
    },
    restoreGate(list){
        _.each(list,item=>{
            this.createGroup(item);
        })
        this.gateList = list;
    },
    createGroup(data){
        let left = 80;
        let top = 50;
        let that = this;
        if(data.x||data.y){
            left = this.width*data.x/100;
            top = this.height*data.y/100;
        }
        let group = new zrender.Group({
          draggable:true,
          gateId:data.id,
          gateName:data.name,
          position:[left,top]
        }).on('mouseup', function (evt) {
            that.setGatePos(evt.target.parent);
        });
        let text = this.createText(data); 
        let image = this.createImg(data);
        group.add(text).add(image);
        this.zr.add(group);
        this.groupList.push(group);
    },
    createText(data){
        let text = new zrender.Text({
            style: {
                y:-42,
                textAlign: 'middle',
                verticalAlign: 'middle',
                //textShadowBlur: 3,
                textShadowColor: '#893e95',
                //textShadowOffsetX: 3,
                //textShadowOffsetY: 3,
                text: data.name,
                fill: '#c0f',
                fontSize: 14,
            }
        }); 
        return text;
    },
    createImg(data){
         let image = new zrender.Image({
            style: {
                x:-15,
                y:-30,
                image:xyImg,
                width:30,
                height:30,
                
            }
        }); 
        return image;
    },
    // 广场
    getMallList() {
      this.mallOpt = [];
      this.mallVal = null;
      this.mallName = "";
      const storageMallVal = this.getSessionLocal("mallId")
      this.$api.base
        .mall({
          accountId: this.$cookie.get("accountId"),
          status_arr: '1,3'
        },
          null,
          true
        )
        .then(res => {
          let result = res.data.data;
          if (result.length > 0) {
            this.mallOpt = result;
            if (storageMallVal) {
              this.mallVal = storageMallVal - 0;
              const matchedMall = result.find(item => item.id === this.mallVal)
              this.mallName = matchedMall.name;
            } else {
              this.mallVal = result[0].id;
              this.setSessionLocal("mallId", this.mallVal);
              this.mallName = result[0].name;
            }
          }
          this.floorFetch()

        })
        .catch(err => {
          console.log(err)
        });
    },
    chooseMall(mallId) {
      this.setSessionLocal("mallId", mallId);
      const matchedMall = this.mallOpt.find(item => item.id == mallId)
      this.mallName = matchedMall.name;
      this.floorValue = ''
      this.floorFetch()
    },
    // 楼层
    floorFetch() {
      this.floorList = [];
      this.floorValue = "";
      this.$api.base
        .floor({
          mallId: this.mallVal,
          status: 1
        })
        .then(data => {
          var result = data.data;
          this.floorList = result.data;
          if (result.data.length) {
            this.floorValue = result.data[0].id
            this.getFloorImg()
          } else {
            this.gateData = []
          }

        })
    },
    chooseFloor() {
      this.getFloorImg()
    },
    searchFun() {
      this.getFloorImg();
    },
    getFloorImg() {
      if(this.tempFloorValue&&this.tempFloorValue==this.floorValue)return false;
      this.tempFloorValue=this.floorValue;
      let floorPlan =  _.findWhere(this.floorList, { id: this.floorValue }).floorPlan;
      this.floorImg = floorPlan?window._vionConfig.picUrl +floorPlan:defaultImg;
      if (this.zr && this.zr.clear) this.zr.clear();
      if(!floorPlan){
         this.$message({ showClose: true, message: this.$t('message.NoFloorImg'), type: 'warning' })
      }
    }
  }
};
</script>

<style scoped lang="less">
.manage-select-box .el-select {
  width: 150px;
}
.manage-container {
  height: 100%;
}
.manage-content {
  height: calc(100% - 55px);
  overflow: auto;
}
.gateWrap{
    position: relative;
    width: 100%;
}
.gateWrap .fimg{
    display: block;
    width: 100%;
}
.gateWrap .grender{
   position: absolute;
   left: 0;
   top: 0;
   width:100%;
   height: 100%;
}
</style>