|
@@ -1,6 +1,6 @@
|
|
<template>
|
|
<template>
|
|
<div class="space-index">
|
|
<div class="space-index">
|
|
- <statistics :statistics-msg="statisticsMsg" />
|
|
|
|
|
|
+ <statistics :statistics-msg="statisticsMsg"/>
|
|
<el-divider class="small-divider"></el-divider>
|
|
<el-divider class="small-divider"></el-divider>
|
|
<div class="tabs">
|
|
<div class="tabs">
|
|
<el-tabs v-model="activeName" type="card">
|
|
<el-tabs v-model="activeName" type="card">
|
|
@@ -9,16 +9,18 @@
|
|
</el-tabs>
|
|
</el-tabs>
|
|
<div class="tab-content">
|
|
<div class="tab-content">
|
|
<div class="search">
|
|
<div class="search">
|
|
- <el-cascader v-model="value1" :options="options" @change="handleChange" placeholder="请选择楼层" class="item"></el-cascader>
|
|
|
|
- <el-cascader v-model="value2" :options="options" @change="handleChange" placeholder="请选择分区" class="item"
|
|
|
|
- v-if="activeName==='picture'"></el-cascader>
|
|
|
|
- <admSearch @SearchValue="searchValue" class="item" v-if="activeName==='table'" />
|
|
|
|
|
|
+ <el-cascader v-model="value1" :options="options" @change="handleChange" placeholder="请选择楼层"
|
|
|
|
+ class="item"></el-cascader>
|
|
|
|
+ <el-cascader v-model="value2" :options="options" @change="handleChange" placeholder="请选择分区"
|
|
|
|
+ class="item"
|
|
|
|
+ v-if="activeName==='picture'"></el-cascader>
|
|
|
|
+ <admSearch @SearchValue="searchValue" class="item" v-if="activeName==='table'"/>
|
|
</div>
|
|
</div>
|
|
<div v-if="activeName==='table'">
|
|
<div v-if="activeName==='table'">
|
|
- <admMultiTable />
|
|
|
|
|
|
+ <admMultiTable/>
|
|
</div>
|
|
</div>
|
|
<div class="graph" v-if="activeName==='picture'">
|
|
<div class="graph" v-if="activeName==='picture'">
|
|
- <spaceGraph />
|
|
|
|
|
|
+ <spaceGraph/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -40,8 +42,8 @@ export default class extends Vue {
|
|
total: 93640,
|
|
total: 93640,
|
|
};
|
|
};
|
|
activeName = "table";
|
|
activeName = "table";
|
|
- value1: ["zhinan", "shejiyuanze"];
|
|
|
|
- value2: [];
|
|
|
|
|
|
+ value1 = ["zhinan", "shejiyuanze"];
|
|
|
|
+ value2 = [];
|
|
options = [
|
|
options = [
|
|
{
|
|
{
|
|
value: "zhinan",
|
|
value: "zhinan",
|
|
@@ -62,10 +64,12 @@ export default class extends Vue {
|
|
],
|
|
],
|
|
},
|
|
},
|
|
];
|
|
];
|
|
|
|
+
|
|
// 建筑楼层更改
|
|
// 建筑楼层更改
|
|
handleChange(v) {
|
|
handleChange(v) {
|
|
console.log(v);
|
|
console.log(v);
|
|
}
|
|
}
|
|
|
|
+
|
|
// 搜索
|
|
// 搜索
|
|
searchValue(val: string) {
|
|
searchValue(val: string) {
|
|
console.log(val);
|
|
console.log(val);
|
|
@@ -78,21 +82,27 @@ export default class extends Vue {
|
|
background: #fff;
|
|
background: #fff;
|
|
padding: 12px;
|
|
padding: 12px;
|
|
height: 100%;
|
|
height: 100%;
|
|
|
|
+
|
|
.small-divider {
|
|
.small-divider {
|
|
margin: 12px 0;
|
|
margin: 12px 0;
|
|
}
|
|
}
|
|
|
|
+
|
|
.tabs {
|
|
.tabs {
|
|
position: relative;
|
|
position: relative;
|
|
height: calc(100% - 92px);
|
|
height: calc(100% - 92px);
|
|
|
|
+
|
|
::v-deep .el-tabs__header {
|
|
::v-deep .el-tabs__header {
|
|
margin: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
+
|
|
.tab-content {
|
|
.tab-content {
|
|
height: calc(100% - 41px);
|
|
height: calc(100% - 41px);
|
|
border: 1px solid #e1e7ea;
|
|
border: 1px solid #e1e7ea;
|
|
border-top: none;
|
|
border-top: none;
|
|
|
|
+
|
|
.search {
|
|
.search {
|
|
padding: 16px;
|
|
padding: 16px;
|
|
|
|
+
|
|
& > .item + .item {
|
|
& > .item + .item {
|
|
margin-left: 16px;
|
|
margin-left: 16px;
|
|
}
|
|
}
|