|
@@ -31,18 +31,179 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="middle">
|
|
|
- <province v-if="showMap"
|
|
|
+ <!-- <province v-if="showMap"
|
|
|
ref="province"
|
|
|
- @mapClick="onMapClick"></province>
|
|
|
+ @mapClick="onMapClick"></province> -->
|
|
|
+ <img
|
|
|
+ v-if="showMap"
|
|
|
+ class="build"
|
|
|
+ src="@/assets/images/build.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
<img
|
|
|
v-if="showLocal"
|
|
|
class="build"
|
|
|
- src="@/assets/images/build.png"
|
|
|
+ src="@/assets/images/layers.png"
|
|
|
alt=""
|
|
|
/>
|
|
|
+ <!-- 楼层按钮 -->
|
|
|
+ <div class="right-area">
|
|
|
+ <div class="leftNav" v-if="leftNav">
|
|
|
+ <div
|
|
|
+ :class="['model1', 0 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(0, 'showMap')"
|
|
|
+ >
|
|
|
+ 23层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 1 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(1, 'showLocal')"
|
|
|
+ >
|
|
|
+ 22 层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 2 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(2, 'showLocal')"
|
|
|
+ >
|
|
|
+ 21层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 3 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(3, 'showLocal')"
|
|
|
+ >
|
|
|
+ 20层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 4 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(4, 'showLocal')"
|
|
|
+ >
|
|
|
+ 19层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 5 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(5, 'showLocal')"
|
|
|
+ >
|
|
|
+ 18层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 6 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(6, 'showLocal')"
|
|
|
+ >
|
|
|
+ 17层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 7 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(7, 'showLocal')"
|
|
|
+ >
|
|
|
+ 16层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 8 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(8, 'showLocal')"
|
|
|
+ >
|
|
|
+ 15层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 9 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(9, 'showLocal')"
|
|
|
+ >
|
|
|
+ 14层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 10 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(10, 'showLocal')"
|
|
|
+ >
|
|
|
+ 13层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 11 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(11, 'showLocal')"
|
|
|
+ >
|
|
|
+ 12层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 12 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(12, 'showLocal')"
|
|
|
+ >
|
|
|
+ 11层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 13 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(13, 'showLocal')"
|
|
|
+ >
|
|
|
+ 10层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 14 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(14, 'showLocal')"
|
|
|
+ >
|
|
|
+ 09层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 15 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(15, 'showLocal')"
|
|
|
+ >
|
|
|
+ 08层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 16 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(16, 'showLocal')"
|
|
|
+ >
|
|
|
+ 07层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 17 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(17, 'showLocal')"
|
|
|
+ >
|
|
|
+ 06层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 18 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(18, 'showLocal')"
|
|
|
+ >
|
|
|
+ 05层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 19== curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(19, 'showLocal')"
|
|
|
+ >
|
|
|
+ 04层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 20 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(20, 'showLocal')"
|
|
|
+ >
|
|
|
+ 03层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 21 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(21, 'showLocal')"
|
|
|
+ >
|
|
|
+ 02层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1',22 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(22, 'showLocal')"
|
|
|
+ >
|
|
|
+ 01层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 23 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(23, 'showLocal')"
|
|
|
+ >
|
|
|
+ B1层
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model1', 24 == curBodex ? 'cur' : '']"
|
|
|
+ @click="chooseBox(24, 'showLocal')"
|
|
|
+ >
|
|
|
+ B2层
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!-- 返回按钮 -->
|
|
|
<div class="bottom-area flex-row align-items-center space-between">
|
|
|
- <div class="bottom-left flex-row align-items-center">
|
|
|
+ <!-- <div class="bottom-left flex-row align-items-center">
|
|
|
<div class="left-item">
|
|
|
<el-cascader
|
|
|
v-model="curCompany"
|
|
@@ -93,16 +254,13 @@
|
|
|
></span>
|
|
|
<span>{{ data.label }}</span>
|
|
|
</div>
|
|
|
- <!-- <div
|
|
|
- v-if="data.level == 2"
|
|
|
- style="width: 1.5vh;height: 1.5vh;background-color: red;border-radius: 60%;margin-top:10px;margin-left:10px;float:right"
|
|
|
- ></div> -->
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
</el-cascader>
|
|
|
</div>
|
|
|
<div class="office" disabled>办公区</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<div class="bottom-right">
|
|
|
<img
|
|
|
v-if="showBack"
|
|
@@ -209,6 +367,8 @@ export default {
|
|
|
props: {},
|
|
|
data() {
|
|
|
return {
|
|
|
+ curBodex:30,
|
|
|
+ leftNav:true,
|
|
|
leftShow: true,
|
|
|
rightShow: true,
|
|
|
dialogShow: false,
|
|
@@ -233,6 +393,15 @@ export default {
|
|
|
beforeDestroy() {},
|
|
|
mounted() {},
|
|
|
methods: {
|
|
|
+ //切换菜单
|
|
|
+ chooseBox(index) {
|
|
|
+ this.curBodex = index;
|
|
|
+ this.showMap = false;
|
|
|
+ this.showLocal = true;
|
|
|
+ this.leftNav=false;
|
|
|
+ this.showBack=true
|
|
|
+ // this.showBox = this.Boxtabs[index].tab;
|
|
|
+ },
|
|
|
showDialog(type){
|
|
|
if(type < 4){
|
|
|
this.leftShow = false;
|
|
@@ -279,16 +448,21 @@ export default {
|
|
|
|
|
|
//返回操作
|
|
|
onBack() {
|
|
|
- this.curDeep = 1;
|
|
|
- if (this.curDeep <= 1) {
|
|
|
- this.showBack = false;
|
|
|
- this.showMap = true;
|
|
|
- this.showLocal = false;
|
|
|
- this.curCompany = [];
|
|
|
- }
|
|
|
- this.appOrg = '0000';
|
|
|
- this.monitorName = "";
|
|
|
- this.$refs.province.reloadMap(this.curDeep);
|
|
|
+ this.showBack = false;
|
|
|
+ this.showMap = true;
|
|
|
+ this.showLocal = false;
|
|
|
+ this.leftNav=true;
|
|
|
+ this.curBodex=30
|
|
|
+ // this.curDeep = 1;
|
|
|
+ // if (this.curDeep <= 1) {
|
|
|
+ // this.showBack = false;
|
|
|
+ // this.showMap = true;
|
|
|
+ // this.showLocal = false;
|
|
|
+ // this.curCompany = [];
|
|
|
+ // }
|
|
|
+ // this.appOrg = '0000';
|
|
|
+ // this.monitorName = "";
|
|
|
+ // this.$refs.province.reloadMap(this.curDeep);
|
|
|
},
|
|
|
|
|
|
//选择公司
|
|
@@ -429,14 +603,46 @@ export default {
|
|
|
.middle{
|
|
|
display: flex;
|
|
|
flex: 1;
|
|
|
- align-items: center;
|
|
|
+ // align-items: center;
|
|
|
justify-content: center;
|
|
|
padding: 125px 0 0 0px;
|
|
|
position: relative;
|
|
|
+ .right-area {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ // top: 50px;
|
|
|
+ z-index: 10;
|
|
|
+ .leftNav{
|
|
|
+
|
|
|
+ margin: 15px 0px 0px 15px;
|
|
|
+ .model1 {
|
|
|
+ width: 65px;
|
|
|
+ height: 32px;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ line-height: 25px;
|
|
|
+ text-align: center;
|
|
|
+ font-family: "PingFangSc";
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: bold;
|
|
|
+ background: url("../../../assets/images/main/choose_short_small.png") no-repeat;
|
|
|
+ // background-size: 95% 95%;
|
|
|
+ color: #CED6D6;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .model:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .cur {
|
|
|
+ color: #05FEFE;
|
|
|
+ // background: url("../../../../assets/images/main/menu_chooe.png") no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.bottom-area {
|
|
|
position: absolute;
|
|
|
right: 50px;
|
|
|
- left: 50px;
|
|
|
+ //left: 50px;
|
|
|
bottom: 50px;
|
|
|
z-index: 10;
|
|
|
.bottom-left {
|