ibms/src/views/ledger/cenotelist/relatedSpace.vue

<template>
  <div id="relatedSpace">
    <div class="condition">
      <div class="header">
        <el-button style="float:left;" size="small" type="default" icon="el-icon-back" @click="goBack"></el-button>
        <span style="float:left;">{{ cenoteObj.name || '' }}</span>
        <div class="edit-tool" v-if="!cenoteObj.onlyRead">
          <el-button v-if="isMyTab == 2" size="small" style="float:right" @click="dialogVisible = true">添加</el-button>
          <div v-else>
            <el-button v-show="!isEdit" @click="isEdit = true" size="small" style="float:right">编辑</el-button>
            <el-button v-show="isEdit" size="small" @click="saveEdit" style="float:right">保存</el-button>
            <el-button v-show="isEdit" size="small" @click="cancelEdit" style="float:right">取消</el-button>
          </div>
          <addSpaceDialog :dialogVisible.sync="dialogVisible" ref="addSpaceDialog" @refresh="refresh" :params="cenoteObj" :spaceType="spaceType"
            :floorType="floorType"></addSpaceDialog>
        </div>
        <el-select v-model="space" placeholder="请选择业务空间" @change="changeSpace" style="margin-left:15px;">
          <el-option v-for="item in spaceList" :key="item.Code" :label="item.Name" :value="item.Code">
          </el-option>
        </el-select>
      </div>
      <div class="saga-build-tab">
        <el-radio-group v-model="isMyTab" @change="changeRadio" style="width: 136px;">
          <el-radio-button label="1">平面图</el-radio-button>
          <el-radio-button label="2" class="space-own-radio" style="width: 68px;">列表</el-radio-button>
        </el-radio-group>
      </div>
      <div v-show="isMyTab == 1" class="data-item">
        <el-select v-model="building" placeholder="请选择建筑" @change="changeBuilding" v-loading="buildingLoading">
          <el-option v-for="item in buildingList" :key="item.value" :label="item.BuildLocalName" :value="item.BuildID"></el-option>
        </el-select>
        <div style="height:calc(100% - 42px);margin:10px 0 0 0;width:100%;position:relative;">
          <el-scrollbar style="height:100%;width:148px;border:1px solid rgb(201,201,201);margin:0px;float:left;">
            <div class="floor" style="width:149px;height:100%;">
              <span class="floor-item" style="border-bottom:1px solid rgb(201,201,201)">楼 层</span>
              <div v-if="building" v-loading="buildingLoading">
                <span class="floor-item" @click="changeFloor(item.FloorID)" :class="{floorItemChoose:(item.FloorID == floor)}"
                  v-for="item in buildingObj.Floor" :key="item.FloorID">{{ item.FloorLocalName }}</span>
              </div>
            </div>
          </el-scrollbar>
          <div style="float:right;height:100%;width:calc(100% - 152px);border:1px solid rgb(201,201,201);">
            <cenote-graphy ref="cenotegraphy"></cenote-graphy>
          </div>
        </div>

      </div>
      <div v-show="isMyTab == 2" class="data-item">
        <related-spaceList :space="space" :buildingList="buildingList" :spaceType="spaceType" :floorType="floorType" ref="relatedSpacelist">
        </related-spaceList>
      </div>
    </div>
  </div>
</template>

<script>
import spaceSelect from "@/components/ledger/lib/spaceSelect";
import relatedSpaceList from "@/views/ledger/cenotelist/relatedSpaceList";
import addSpaceDialog from '@/components/ledger/cenote/dialog/addSpaceDialog';
import { queryDictionaryHead, buildingQuery, shaftSpaceTypeQuery, shaftSpaceBuildingQuery } from '@/api/scan/request';
import cenoteGraphy from '@/components/ledger/lib/cenoteGraphy'
export default {
  data() {
    return {
      isMyTab: 1,//默认平面图
      isEdit: false,//是否正在编辑
      building: '',//当前建筑id
      buildingObj: {},//当前建筑obj
      buildingList: [],
      space: '',//当前业务空间
      spaceList: [],//空间list
      floor: '',//当前楼层
      dialogVisible: false,//添加空间弹窗
      spaceType: {},//空间种类
      floorType: {},//子组件楼层信息
      buildingLoading: false,//左侧列表加载
    }
  },
  computed: {
    cenoteObj() {
      return this.$route.query;
    }
  },
  props: {

  },
  components: {
    spaceSelect,
    relatedSpaceList,
    addSpaceDialog,
    cenoteGraphy
  },
  created() {
    this.load();
    this.getSpaceData();
  },
  methods: {
    //获取空间信息
    getSpaceData() {
      if (this.cenoteObj.onlyRead) {
        let pa = {
          shaftId: this.$route.query.ShaftId
        }
        shaftSpaceTypeQuery(pa, res => {
          this.spaceList = res.Content.map(item => {
            return { Code: item.ObjectType, Name: item.ObjectTypeName };
          });
          this.showDefaultSpace();
        });
      }
      else {
        let pa = {
          Filters: `parentId='Space'`
        }
        queryDictionaryHead(pa, res => {
          this.spaceList = res.Content.map(t => {
            if (t.Name != "元空间") {
              this.spaceType[t.Code] = t.Name;
            }
            return t;
          });
          this.showDefaultSpace();
        });
      }
    },
    //默认显示第一个空间
    showDefaultSpace() {
      if (this.spaceList.length) {
        this.space = this.spaceList[0].Code;
      }
      //处理空间类型
      this.spaceList.map(item => {
        if (item.Name != "元空间") {
          this.spaceType[item.Code] = item.Name;
        }
      });
      //加载楼层信息
      this.loadBuildingData();
    },
    //获取楼层信息
    loadBuildingData() {
      if (this.cenoteObj.onlyRead) {
        let param = {
          ShaftId: this.$route.query.ShaftId,
          ObjectType: this.space
        };
        this.buildingLoading = true;
        shaftSpaceBuildingQuery(param, res => {
          this.buildingLoading = false;
          this.buildingList = res.Content;
          this.buildingList = this.buildingList.map(item => {
            item.Floor = item.FloorList;
            item.BuildID = item.BuildingId;
            item.BuildLocalName = item.BuildingLocalName;
            if (item.Floor) {
              item.Floor = item.Floor.map(item => {
                item.FloorID = item.FloorId;
                item.FloorLocalName = item.FloorLocalName;
                return item;
              })
            }
            return item;
          })
          this.handleBuildingData();
        });
      }
      else {
        let param = {
          Cascade: [
            { Name: "floor" }
          ]
        };
        buildingQuery(param, res => {
          this.buildingList = res.Content;
          this.handleBuildingData();
        });
      }
    },
    //处理建筑楼层数据
    handleBuildingData() {
      if (this.buildingList.length) {
        this.building = this.buildingList[0].BuildID;
        this.buildingObj = this.buildingList[0];
        if (this.buildingObj.Floor && this.buildingObj.Floor.length) {
          this.floor = this.buildingObj.Floor[0].FloorID;
        }
      }
      this.buildingList.map(item => {
        if (item.BuildID && item.BuildLocalName) {
          this.floorType[item.BuildID] = item.BuildLocalName;
          if (item.Floor instanceof Array) {
            item.Floor.map(f => {
              if (f.FloorID && f.FloorLocalName) {
                this.floorType[f.FloorID] = f.FloorLocalName;
              }
            })
          }
        }
      });
    },
    //更改业务空间类型
    changeSpace(val) {
      this.space = val;
      this.loadBuildingData();
    },
    //加载数据
    load() {

    },
    //更换建筑
    changeBuilding(bid) {
      this.buildingList.map(item => {
        if (item.BuildID == bid) {
          this.buildingObj = item;
          if (item.Floor && item.Floor.length) {
            this.floor = item.Floor[0].FloorID
          }
        }
      })
      this.load();
    },
    //更换楼层
    changeFloor(fid) {
      this.floor = fid;
      this.load();
    },
    //取消编辑
    cancelEdit(){
      this.isEdit = false;
      this.$refs.cenotegraphy.cancelEdit();
    },
    //保存编辑
    saveEdit(){
      this.isEdit = false;
      this.$refs.cenotegraphy.saveEdit();
    },
    //更换列表或平面图
    changeRadio(val) {
      if (val == 2) {
        this.spaceList.unshift({ Code: '', Name: '全部' });
      }
      if (val == 1) {
        if (this.spaceList.length > 0) {
          this.spaceList.shift();
        }
      }
      if (this.spaceList.length) {
        this.changeSpace(this.spaceList[0].Code);
      }
      this.isMyTab = val;
      this.load();
    },
    //返回
    goBack() {
      this.$router.push({
        name: 'cenotelist'
      })
    },
    //更新
    refresh() {
      this.$refs.relatedSpacelist.getSpaceList();
      this.dialogVisible = false;
    }
  },
  watch: {
    floor: {
      handler(val) {
          this.isEdit = false;
          let buildfloor = [this.building, val]
          this.$refs.cenotegraphy.getFloorMap(buildfloor, this.space)
      }
    },
    isEdit: {
      handler(val) {
        this.$refs.cenotegraphy.setSelectAble(val);
      }
    }
  }
}
</script>

<style lang="less" scoped>
.condition {
  position: relative;
  padding: 10px 10px;
  display: flex;
  height: calc(100% - 22px);
  flex-direction: column;
  border: 1px solid #dfe6ec;
  background: #fff;
  .header {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    span {
      line-height: 33px;
      margin-left: 15px;
    }
    /deep/ .buildFloor {
      line-height: 32px;
    }
  }
  .spaceTypes {
    .types {
      float: left;
      width: calc(100% - 200px);
      /deep/ .el-tabs__item.is-top {
        border-top: 2px solid transparent;
        &.is-active {
          border-top: 2px solid #409eff;
        }
      }
    }
    .deleBtn {
      float: left;
      width: 200px;
      text-align: right;
      height: 40px;
      border-bottom: 1px solid #e4e7ed;
    }
  }
}
.saga-build-tab {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  .tab-main {
    float: left;
    width: 120px;
    padding: 0 5px;
    margin: 5px 0;
    border: 1px solid #ccc;
    background-color: #fff;
    height: 30px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    i {
      font-size: 18px;
      padding-right: 10px;
      float: left;
      line-height: 30px;
      margin-left: 10px;
    }
    span {
      line-height: 30px;
      float: left;
    }
  }
  .tab-active {
    background-color: #409eff;
    color: #fff;
  }
}
.data-item {
  height: calc(100% - 44px);
  padding: 10px 0px;
}
.floor-item {
  padding: 10px 10px;
  display: block;
  margin: 0px;
  cursor: pointer;
}
.floorItemChoose {
  background: rgba(0, 0, 0, 0.2);
}
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>