|
@@ -1,36 +1,183 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <das-board>
|
|
|
- <template v-slot:plan>
|
|
|
- <span>{{plan?plan:"yyyy-mm-dd"}}</span>
|
|
|
- </template>
|
|
|
- <template v-slot:finish>
|
|
|
- <span>{{finish?finish:"yyyy-mm-dd"}}</span>
|
|
|
- </template>
|
|
|
- <template v-slot:onLine>
|
|
|
- <span>{{onLine?onLine:"yyyy-mm-dd"}}</span>
|
|
|
- </template>
|
|
|
- <template v-slot:explain>
|
|
|
- <span>{{explain?explain:"yyyy-mm-dd"}}</span>
|
|
|
- </template>
|
|
|
- </das-board>
|
|
|
- </div>
|
|
|
+ <div id="bd-fl-manage">
|
|
|
+ <el-row>
|
|
|
+ <div class="l-list">
|
|
|
+ <div class="action-box">
|
|
|
+ <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>
|
|
|
+ <h4>建筑</h4>
|
|
|
+ <div class="floor-list">
|
|
|
+ <div v-for="item in floorList" :key="item.id" class="floor-item" @click="changeBuild">
|
|
|
+ <span>
|
|
|
+ {{item.name}}
|
|
|
+ <el-badge class="mark" is-dot />
|
|
|
+ </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 prop="EquipmentMark" label="楼层本地名" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column label="楼层信息">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button size="mini" @click="handleDelete(scope.$index, 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.type==1">
|
|
|
+ <i class="iconfont icon-floorplan"></i>
|
|
|
+ 查看平面图
|
|
|
+ </p>
|
|
|
+ <p v-else-if="scope.row.type==2">
|
|
|
+ <el-badge is-dot>
|
|
|
+ <i class="iconfont icon-floorplan"></i>
|
|
|
+ </el-badge>
|
|
|
+ 平面图重复
|
|
|
+ </p>
|
|
|
+ <p v-else>
|
|
|
+ <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.EquipmentMark}}</span>
|
|
|
+ <el-button size="mini" @click="handleDelete(scope.$index, 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.$index, 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>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import dasBoard from "@/views/dasboard/index";
|
|
|
export default {
|
|
|
- components: {
|
|
|
- dasBoard
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- plan: "2019-08",
|
|
|
- finish: "2019-08",
|
|
|
- onLine: "2019-08",
|
|
|
- explain: "建筑楼层管理"
|
|
|
+ components: {
|
|
|
+ dasBoard
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ headerStyle: {
|
|
|
+ backgroundColor: '#e1e4e5',
|
|
|
+ color: '#2b2b2b',
|
|
|
+ lineHeight: '30px'
|
|
|
+ },
|
|
|
+ floorList: [
|
|
|
+ { id: 1, name: '建筑a' },
|
|
|
+ { id: 2, name: '建筑b' },
|
|
|
+ { id: 3, name: '建筑c' },
|
|
|
+ ],
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ EquipmentMark: 1
|
|
|
}
|
|
|
- },
|
|
|
- mounted() {}
|
|
|
+ ],
|
|
|
+ page: {
|
|
|
+ pageSize: 50,
|
|
|
+ pageSizes: [10, 20, 50, 100],
|
|
|
+ pageNumber: 1,
|
|
|
+ total: 0
|
|
|
+ },
|
|
|
+ loading: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() { },
|
|
|
+ methods: {
|
|
|
+ changeBuild() { },
|
|
|
+ addBuild() { },
|
|
|
+ delBuild() { },
|
|
|
+ editBuild() { },
|
|
|
+ handleDelete() { },
|
|
|
+ handleSizeChange(pageSize) { },
|
|
|
+ handleCurrentChange(pageNumber) { },
|
|
|
+ addFloor() { }
|
|
|
+ }
|
|
|
}
|
|
|
-</script>
|
|
|
+</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 #dfe6ec;
|
|
|
+ border-bottom: 1px solid #dfe6ec;
|
|
|
+ line-height: 44px;
|
|
|
+ }
|
|
|
+ .floor-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>
|