123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394 |
- <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-badge :is-dot="showSpaceDot">
- <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>
- </el-badge>
- </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-badge :is-dot="showBuildDot">
- <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>
- </el-badge>
- <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'
- import { mapGetters } from 'vuex'
- export default {
- data() {
- return {
- isMyTab: 1,//默认平面图
- isEdit: false,//是否正在编辑
- building: '',//当前建筑id
- buildingObj: {},//当前建筑obj
- buildingList: [],
- space: '',//当前业务空间
- spaceList: [],//空间list
- floor: '',//当前楼层
- dialogVisible: false,//添加空间弹窗
- spaceType: {},//空间种类
- floorType: {},//子组件楼层信息
- buildingLoading: false,//左侧列表加载
- showSpaceDot:false,//空间提示红点
- showBuildDot:false,//楼层提示红点
- }
- },
- computed: {
- cenoteObj() {
- return this.$route.query;
- },
- ...mapGetters("layout", ["projectId"])
- },
- props: {
- },
- components: {
- spaceSelect,
- relatedSpaceList,
- addSpaceDialog,
- cenoteGraphy
- },
- created() {
- 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;
- if(this.spaceList.length > 1 && this.cenoteObj.onlyRead){
- this.showSpaceDot = true;
- }
- }
- //处理空间类型
- 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;
- }
- if(this.buildingList.length > 1 && this.cenoteObj.onlyRead){
- this.showBuildDot = true;
- }
- }
- 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();
- this.showSpaceDot = false;
- },
- //更换建筑
- 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.showBuildDot = false;
- },
- //更换楼层
- changeFloor(fid) {
- this.floor = fid;
- },
- //取消编辑
- 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;
- },
- //返回
- 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)
- }
- },
- space: {
- handler(val) {
- this.isEdit = false;
- let buildfloor = [this.building, this.floor]
- this.$refs.cenotegraphy.getFloorMap(buildfloor, val)
- }
- },
- isEdit: {
- handler(val) {
- this.$refs.cenotegraphy.setSelectAble(val);
- }
- },
- projectId:{
- handler(val){
- this.goBack();
- }
- }
- }
- }
- </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;
- /deep/ .is-horizontal{
- display:none
- }
- }
- .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>
|