Parcourir la source

add buildingfloor manage

haojianlong il y a 5 ans
Parent
commit
da2f36c17b

+ 7 - 5
src/components/point/dynamicdata/equipRules.vue

@@ -39,7 +39,7 @@
     </el-row>
     <!-- 列表区域 -->
     <div class="table-area">
-      <el-table :data="tableData" style="width: 100%" height="100%" v-loading="loading" :header-cell-style="{background:'#f7f9fb'}">
+      <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 min-width="100"></el-table-column>
         <el-table-column prop="LocationFlag" label="位置标签" min-width="200">
           <template slot-scope="scope">
@@ -101,6 +101,11 @@ export default {
   },
   data() {
     return {
+      headerStyle: {
+        backgroundColor: '#e1e4e5',
+        color: '#2b2b2b',
+        lineHeight: '30px'
+      },
       sourceList: [], //数据源
       DynEquipList: [], //数据字典设备类型
       LocFlagList: [], //位置标签
@@ -243,6 +248,7 @@ export default {
   /deep/ .table-area {
     width: 100%;
     height: calc(100% - 125px);
+    margin-bottom: 10px;
     td div {
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -257,10 +263,6 @@ export default {
       text-overflow: ellipsis;
     }
   }
-  .fr {
-    padding-top: 10px;
-    float: right;
-  }
 }
 </style>
 

+ 175 - 28
src/views/ready/buildfloor/index.vue

@@ -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>