|
@@ -0,0 +1,162 @@
|
|
|
+<template>
|
|
|
+ <div class="subject-indexRightPage">
|
|
|
+ <div class="top-button-box">
|
|
|
+ <div :class="rightButtonType == 1 ? 'buttonColorA' : 'buttonColorB'" @click="rightButtonClick(1)">传感器监测</div>
|
|
|
+ <div :class="rightButtonType == 2 ? 'buttonColorA' : 'buttonColorB'" @click="rightButtonClick(2)">物联控制</div>
|
|
|
+ <div :class="rightButtonType == 3 ? 'buttonColorA' : 'buttonColorB'" @click="rightButtonClick(3)">视频监控</div>
|
|
|
+ <div :class="rightButtonType == 4 ? 'buttonColorA' : 'buttonColorB'" @click="rightButtonClick(4)">声光报警</div>
|
|
|
+ <div :class="rightButtonType == 5 ? 'buttonColorA' : 'buttonColorB'" @click="rightButtonClick(5)">智能门禁</div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-content-max-big-box">
|
|
|
+ <div class="bottom-content-address-box">
|
|
|
+ <el-tooltip class="item" effect="dark"
|
|
|
+ v-if="deptName"
|
|
|
+ :content="deptName" placement="bottom">
|
|
|
+ <i>{{deptName}}</i>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip class="item" effect="dark"
|
|
|
+ v-if="buildName && floorName"
|
|
|
+ :content="buildName+floorName" placement="bottom">
|
|
|
+ <i>当前位置:{{buildName}}{{floorName}}</i>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-content-big-box">
|
|
|
+ <sensor-page v-if="rightButtonType == 1"></sensor-page>
|
|
|
+ <hardware-page v-if="rightButtonType == 2"></hardware-page>
|
|
|
+ <video-page v-if="rightButtonType == 3"></video-page>
|
|
|
+ <alarm-page v-if="rightButtonType == 4"></alarm-page>
|
|
|
+ <entrance-page v-if="rightButtonType == 5"></entrance-page>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import sensorPage from './sensorPage.vue'
|
|
|
+ import hardwarePage from './hardwarePage.vue'
|
|
|
+ import videoPage from './videoPage.vue'
|
|
|
+ import alarmPage from './alarmPage.vue'
|
|
|
+ import entrancePage from './entrancePage.vue'
|
|
|
+ export default {
|
|
|
+ name: 'indexRightPage',
|
|
|
+ components: {
|
|
|
+ sensorPage,
|
|
|
+ hardwarePage,
|
|
|
+ videoPage,
|
|
|
+ alarmPage,
|
|
|
+ entrancePage,
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ //实验室ID
|
|
|
+ infoId:'',
|
|
|
+ //当前选中右侧按钮
|
|
|
+ rightButtonType:1,
|
|
|
+ //位置数据
|
|
|
+ deptName:'',
|
|
|
+ buildName:'',
|
|
|
+ floorName:'',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ tableButtonClick(item){
|
|
|
+ this.$set(this,'infoId',item.infoId);
|
|
|
+ this.$set(this,'deptName',item.deptName);
|
|
|
+ this.$set(this,'buildName',item.buildName);
|
|
|
+ this.$set(this,'floorName',item.floorName);
|
|
|
+ this.$set(this,'rightButtonType',1);
|
|
|
+ },
|
|
|
+ //切换实验室展示数据
|
|
|
+ rightButtonClick(type) {
|
|
|
+ let self = this
|
|
|
+ if (this.rightButtonType != type) {
|
|
|
+ if(type == 1){
|
|
|
+ this.$set(this,'rightButtonType',type);
|
|
|
+ }else if(type == 2){
|
|
|
+ this.$set(this,'rightButtonType',type);
|
|
|
+ }else if(type == 3){
|
|
|
+ this.$set(this,'rightButtonType',type);
|
|
|
+ }else if(type == 4){
|
|
|
+ this.$set(this,'rightButtonType',type);
|
|
|
+ }else if(type == 5){
|
|
|
+ this.$set(this,'rightButtonType',type);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .subject-indexRightPage{
|
|
|
+ width:428px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .top-button-box{
|
|
|
+ display: flex;
|
|
|
+ margin-left:6px;
|
|
|
+ div{
|
|
|
+ padding:0 10px;
|
|
|
+ height:40px;
|
|
|
+ line-height:40px;
|
|
|
+ font-size:14px;
|
|
|
+ text-align: center;
|
|
|
+ border-top-right-radius: 10px;
|
|
|
+ border-top-left-radius: 10px;
|
|
|
+ margin-right:1px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .buttonColorA{
|
|
|
+ color:#0045AF;
|
|
|
+ background:#fff ;
|
|
|
+ border: 1px solid #E0E0E0;
|
|
|
+ border-bottom: 1px solid rgba(224,224,224,0.3);
|
|
|
+ }
|
|
|
+ .buttonColorB{
|
|
|
+ color:#333;
|
|
|
+ background:#E0E0E0 ;
|
|
|
+ border: 1px solid #E0E0E0;
|
|
|
+ border-bottom:none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom-content-max-big-box{
|
|
|
+ width:408px;
|
|
|
+ box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 0px 0px 10px 10px;
|
|
|
+ font-weight:500;
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-left:6px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom:10px;
|
|
|
+ .bottom-content-address-box{
|
|
|
+ margin:16px 26px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ >i{
|
|
|
+ font-style: normal;
|
|
|
+ line-height:18px;
|
|
|
+ font-size:16px;
|
|
|
+ color: #333;
|
|
|
+ overflow:hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom-content-big-box{
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|