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 drawUtils from './drawUtils';
export default {
  extends:drawUtils,                                                             
  data() {
    return {
      floorList: [],
      floorValue: '',
      currShopObj: {},
      mallName: "",
      mallVal: null,
      mallOpt: [],
      gateData: [],
      floorImg: '',
      loading: true,
      width:0,
      height:0,
      groupList:[],
      gateList:[],
      groupZ:99
    };
  },
  mounted() {
    this.getMallList();
  },
  methods: {
    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
        });
        window.zr = this.zr;
        Promise.all([this.getGateList(),this.getShotList()]).then(res=>{
            this.gateList = _.map(res[0],item=>{
                let shot = _.findWhere(res[1],{gateId:item.id});
                if(shot){
                    item.serialnum = shot.serialnum;
                    item.picUrl = window._vionConfig.picUrl + "/snapshot/real/" + item.serialnum + ".jpg?t=" + Date.parse(new Date()) / 1000;
                }
                item.coordinates&&(item.coordinates=JSON.parse(item.coordinates))
                return item;
            })
            this.drawJoinMap()
        });
    },
    drawJoinMap(){
        this.loading = false;
        let that = this;
        _.each(this.gateList.reverse(),(item,index)=>{
            if(item.picUrl){
              let img = new Image();
              img.src = item.picUrl;
              img.onload = function(){
                  item.width = this.width;
                  item.height = this.height;
                  that.createGroup(item,index+1);
              }
            }
        })
    },
    createGroup(data,index){
        let left = 0;
        let top = 0;
        let that = this;
        let group = new zrender.Group({
          z:1,
          draggable:true,
          gateId:data.id,
          gateName:data.name,
          picUrl:data.picUrl,
          position:[left,top]
        }).on('mouseup', function (evt) {
            that.saveGateData(data.id);
        })
        this.groupList.push(group);
        this.zr.add(group);
        window.group = group;
        this.drawPolyImage(data,group);  
    },
    /*獲取監控點*/
    getGateList(){
        return this.$api.management.gateFilterList({
            mallId:this.mallVal,
            floorId:this.floorValue
        }).then(res=>{
            return res.data.data;
        });
    },
    /*獲取通道列表*/
    getShotList(){
        return this.$api.management.channelFilterList({
            mallId:this.mallVal,
            floorId_arr:this.floorValue
        }).then(res=>{
            return res.data.data;
        });
    },
    // 广场
    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%;
   opacity: 0.7;
}
</style>