ibms/src/views/ready/buildfloor/index.vue

<template>
  <div id="bd-fl-manage">
    <el-row>
      <div class="l-list">
        <div class="action-box">
          <div>
            <el-button size="small" type="default" icon="el-icon-plus" @click="addBuild"></el-button>
            <el-button size="small" type="default" icon="el-icon-minus" @click="delBuild"></el-button>
            <el-button size="small" type="default" icon="el-icon-edit-outline" @click="editBuild"></el-button>
          </div>
        </div>
        <h4>建筑</h4>
        <div class="build-list">
          <div v-for="(item,index) in buildList" :key="item.BuildID" :class="{'floor-item':true,active:item.active}" @click="changeBuild(index)">
            <span>
              {{item.BuildLocalName || item.BuildName}}
              <el-badge class="mark" :is-dot="false" />
            </span>
          </div>
        </div>
      </div>
      <div class="r-table">
        <div class="action-box">
          <el-button size="small" type="default" @click="addFloor">添加楼层</el-button>
        </div>
        <div class="table-box">
          <el-table :data="tableData" style="width: 100%" height="100%" v-loading="loading" :header-cell-style="headerStyle">
            <el-table-column label="楼层本地名">
              <template slot-scope="scope">{{scope.row.FloorLocalName||scope.row.FloorName}}</template>
            </el-table-column>
            <el-table-column label="楼层信息">
              <template slot-scope="scope">
                <el-button size="mini" @click="editFloorData(scope.row)" plain icon="el-icon-edit-outline"></el-button>
              </template>
            </el-table-column>
            <el-table-column prop="Datasource" label="平面图">
              <template slot-scope="scope">
                <p v-if="scope.row.StructureInfo&&scope.row.StructureInfo.FloorMap" @click="checfDrawImg(scope.row,1)">
                  <i class="iconfont icon-floorplan"></i>
                  查看平面图
                </p>
                <p v-else-if="scope.row.type==2" @click="checfDrawImg(scope.row,2)">
                  <el-badge is-dot>
                    <i class="iconfont icon-floorplan"></i>
                  </el-badge>平面图重复
                </p>
                <p v-else @click="checfDrawImg(scope.row,3)">
                  <i class="iconfont icon-nopicture"></i>
                  暂无平面图
                </p>
              </template>
            </el-table-column>
            <el-table-column prop="SubTypeName" label="楼层贯通关系">
              <template slot-scope="scope">
                <span style="margin-right:20px">{{scope.row.FloorThroughList?scope.row.FloorThroughList.length:0}}</span>
                <el-button size="mini" @click="changeConnection(scope.row)" plain icon="el-icon-edit-outline"></el-button>
              </template>
            </el-table-column>
            <el-table-column prop="action" label="操作">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleDelete(scope.row)" type="danger" plain icon="el-icon-delete"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <el-pagination class="fr" v-show="tableData && tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="page.pageNumber" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"></el-pagination>
      </div>
    </el-row>
    <!-- 添加-修改楼层 -->
    <addFloor :title="floorTitle" ref="addFloorDialog" :curBuildId="curBuildId" :curFloorId="curFloorId" @refresh="refresh"></addFloor>
    <!-- 添加-修改建筑 -->
    <addBuild :title="buildTitle" ref="addBuildDialog"></addBuild>
    <!-- 删除建筑-删除楼层 -->
    <el-dialog title="提示" :visible.sync="delDialogVis" width="20%" @close="handleClose" id="messageDialog">
      <div>确定要删除该{{delText}}？</div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="delDialogVis=false">取消</el-button>
        <el-button size="small" type="primary" @click="confirmDel">确认</el-button>
      </span>
    </el-dialog>
    <!-- 添加贯通关系弹窗 -->
    <addConnectivity ref="addConnectivity" @refresh="refresh"></addConnectivity>
    <!-- 查看图片弹窗 -->
    <checkGraphy ref="checkGraphy" @refresh="refresh"></checkGraphy>
  </div>
</template>

<script>
import addFloor from "@/views/ready/buildfloor/addFloor/index";
import addBuild from "@/components/ready/buildfloor/addBuild";
import { mapGetters, mapActions } from "vuex";
import addConnectivity from "@/components/ready/buildfloor/addConnectivity";
import checkGraphy from "./drawGraphy/checkGraphy"; //查看图片
import { buildingQuery, floorQuery, manageDeleteFloor } from "@/api/scan/request";
export default {
  components: {
    addFloor,
    addBuild,
    addConnectivity,
    checkGraphy
  },
  data() {
    return {
      repetitionGraphyVisible: false, // 替换平面图弹窗
      floorTitle: "添加楼层",
      buildTitle: "添加建筑",
      delDialogVis: false,
      delText: "建筑",
      headerStyle: {
        backgroundColor: "#d9d9d9",
        color: "#2b2b2b",
        lineHeight: "30px"
      },
      buildList: [],
      tableData: [
        {
          EquipmentMark: 1
        }
      ],
      page: {
        pageSize: 50,
        pageSizes: [10, 20, 50, 100],
        pageNumber: 1,
        total: 0
      },
      loading: false, //列表loading
      curBuildId: "", //当前选中的建筑id
      curFloorId: "", //当前选中的楼层id
      jsonKey: "",
    };
  },
  computed: {
    ...mapGetters("layout", ["projectId"])
  },
  mounted() { },
  created() {
    this.init();
  },
  methods: {
    init() {
      let bdParam = {
        PageNumber: 1,
        PageSize: 500
      };
      buildingQuery(bdParam, res => {
        this.buildList = res.Content;
        if (this.buildList.length) {
          this.changeBuild(0);
        }
      });
    },
    //change build
    changeBuild(index) {
      this.buildList.map(item => {
        item.active = false;
        return item;
      });
      this.buildList[index].active = true;
      this.curBuildId = this.buildList[index].BuildID;
      this.getFloorTableData();
      this.$forceUpdate();
    },
    //add build
    addBuild() {
      this.$message.warning("开发中...");
      return;
      this.$refs.addBuildDialog.showDialog();
    },
    //delete build
    delBuild() {
      this.$message.warning("开发中...");
      return;
      this.delText = "建筑";
      this.delDialogVis = true;
    },
    //edit build
    editBuild() {
      this.$message.warning("开发中...");
      return;
    },
    //delete floor
    handleDelete(floor) {
      this.delText = "楼层";
      this.delDialogVis = true;
      this.curFloorId = floor.FloorID;
    },
    //确认删除弹窗关闭
    handleClose() { },
    handleSizeChange(pageSize) { },
    handleCurrentChange(pageNumber) { },
    addFloor() {
      this.curFloorId = "";
      this.$refs.addFloorDialog.showDialog();
    },
    // 获取列表
    getFloorTableData() {
      let floorParam = {
        Cascade: [{ Name: "floorThroughList" }],
        Orders: "FloorSequenceID desc",
        PageNumber: this.page.pageNumber,
        PageSize: this.page.pageSize,
        Filters: `BuildID='${this.curBuildId}'`
      };
      floorQuery(floorParam, res => {
        this.tableData = res.Content;
        this.page.total = res.Total;
      });
    },
    // 创建楼层成功-修改关系成功
    refresh() {
      this.getFloorTableData();
    },
    // 确认删除(删除建筑-楼层公用)
    confirmDel() {
      if (this.delText == "楼层") {
        let delParam = [{ FloorID: this.curFloorId }];
        manageDeleteFloor(delParam, res => {
          this.$message.success("删除成功");
          this.delDialogVis = false;
          this.getFloorTableData();
        });
      } else {
        //todo
      }
    },
    // 修改楼层信息
    editFloorData(floor) {
      this.floorTitle = "编辑楼层信息";
      this.curFloorId = floor.FloorID;
      this.$refs.addFloorDialog.showDialog(floor);
    },
    // 修改楼层贯通关系
    changeConnection(row) {
      this.$refs.addConnectivity.showDialog();
      this.$refs.addConnectivity.floor = row;
    },
    // 查看平面图
    checfDrawImg(row, index) {
      if (3 == index) {
        this.$refs.checkGraphy.showDialog(row)
        this.jsonKey = "";
      } else {
        this.jsonKey = row.StructureInfo.FloorMap;
        this.$router.push({ name: "repetitionGraphy", query: { jsonKey: this.jsonKey } });
      }
    }
  },
  watch: {
    projectId() {
      this.init();
    }
  }
};
</script>
<style lang="less" scoped>
#bd-fl-manage {
  overflow: hidden;
  height: 100%;
  position: relative;
  .el-row {
    height: 100%;
    & > div {
      float: left;
      height: 100%;
      overflow: hidden;
      background-color: #fff;
      box-sizing: border-box;
      border: 1px solid #dfe6ec;
      .action-box {
        padding: 10px;
        .el-button--small {
          padding: 10px 11px;
        }
      }
    }
    .l-list {
      width: 17%;
      overflow-y: auto;
      h4 {
        padding-left: 10px;
        border-top: 1px solid #d9d9d9;
        border-bottom: 1px solid #d9d9d9;
        background: #d9d9d9;
        color: #2b2b2b;
        line-height: 44px;
      }
      .build-list {
        line-height: 48px;
        .floor-item {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          span {
            margin-left: 10px;
          }
        }
        .floor-item.active,
        .floor-item:hover {
          background-color: #f5f7fa;
          color: #000;
        }
      }
    }
    .r-table {
      width: 82%;
      margin-left: 1%;
      .table-box {
        height: calc(100% - 106px);
        margin-bottom: 8px;
        .iconfont {
          vertical-align: middle;
        }
        /deep/ .el-badge__content.is-fixed {
          transform: translateY(-6%) translateX(-100%);
        }
        p {
          cursor: pointer;
        }
      }
    }
  }
}
</style>