|
@@ -1,29 +1,79 @@
|
|
|
<template>
|
|
|
- <div class="space-index">
|
|
|
- <statistics :statistics-msg="statisticsMsg" />
|
|
|
- </div>
|
|
|
+ <div class="space-index">
|
|
|
+ <statistics :statistics-msg="statisticsMsg" />
|
|
|
+ <el-divider class="small-divider"></el-divider>
|
|
|
+ <div class="tabs">
|
|
|
+ <el-tabs v-model="activeName" type="card">
|
|
|
+ <el-tab-pane label="列表" name="table"></el-tab-pane>
|
|
|
+ <el-tab-pane label="平面图" name="picture"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <div class="tab-content">
|
|
|
+ <div class="search">
|
|
|
+ <el-cascader v-model="value" :options="options" @change="handleChange" placeholder="请选择楼层" class="item"></el-cascader>
|
|
|
+ <el-cascader v-model="value" :options="options" @change="handleChange" placeholder="请选择分区" class="item"
|
|
|
+ v-if="activeName==='picture'"></el-cascader>
|
|
|
+ <admSearch @SearchValue="searchValue" class="item" v-if="activeName==='table'" />
|
|
|
+ </div>
|
|
|
+ <div v-if="activeName==='table'">
|
|
|
+ <admMultiTable />
|
|
|
+ </div>
|
|
|
+ <div class="graph" v-if="activeName==='picture'">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
import { Vue, Component, Watch } from "vue-property-decorator";
|
|
|
import Bus from "@/utils/bus";
|
|
|
-import statistics from "@/components/public/adm-statistics.vue";
|
|
|
+import { Statistics, AdmSearch, AdmMultiTable } from "../components/index";
|
|
|
@Component({
|
|
|
- name: 'space-index',
|
|
|
- components: { statistics }
|
|
|
+ name: "space-index",
|
|
|
+ components: { Statistics, AdmSearch, AdmMultiTable },
|
|
|
})
|
|
|
export default class extends Vue {
|
|
|
private statisticsMsg = {
|
|
|
- title: '全部空间',
|
|
|
- total: 93640
|
|
|
+ title: "全部空间",
|
|
|
+ total: 93640,
|
|
|
+ };
|
|
|
+ activeName = "table";
|
|
|
+ value: "";
|
|
|
+ options = [];
|
|
|
+ // 建筑楼层更改
|
|
|
+ handleChange() {}
|
|
|
+ // 搜索
|
|
|
+ searchValue(val: string) {
|
|
|
+ console.log(val);
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-.space-index{
|
|
|
+<style lang="scss" scoped>
|
|
|
+.space-index {
|
|
|
background: #fff;
|
|
|
padding: 12px;
|
|
|
height: 100%;
|
|
|
+ .small-divider {
|
|
|
+ margin: 12px 0;
|
|
|
+ }
|
|
|
+ .tabs {
|
|
|
+ position: relative;
|
|
|
+ height: calc(100% - 92px);
|
|
|
+ ::v-deep .el-tabs__header {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .tab-content {
|
|
|
+ height: calc(100% - 41px);
|
|
|
+ border: 1px solid #e1e7ea;
|
|
|
+ border-top: none;
|
|
|
+ .search {
|
|
|
+ padding: 16px;
|
|
|
+ & > .item + .item {
|
|
|
+ margin-left: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|