|
@@ -3,34 +3,6 @@
|
|
|
<div class="indexRightPage-hardwarePage scrollbar-box">
|
|
|
<img class="null-img" src="@/assets/ZDimages/basicsModules/null-data-1.png" v-if="!hardwareList[0]">
|
|
|
<div class="for-hardware-max-big-box scrollbar-box">
|
|
|
- <!--<div class="for-hardware-big-box" :class="!item.online?'offLineColor':'onLineColor'"-->
|
|
|
- <!--v-for="(item,index) in hardwareList" :key="index">-->
|
|
|
- <!--<div class="for-hardware-box">-->
|
|
|
- <!--<div class="for-hardware-text-box" >-->
|
|
|
- <!--<el-tooltip class="item" effect="dark" :content="item.hardwareName" placement="bottom">-->
|
|
|
- <!--<p>{{item.hardwareName}}</p>-->
|
|
|
- <!--</el-tooltip>-->
|
|
|
- <!--<p v-if="!item.online">离线</p>-->
|
|
|
- <!--</div>-->
|
|
|
- <!--<div class="for-hardware-switch-box">-->
|
|
|
- <!--<div class="for-hardware-switch-title">-->
|
|
|
- <!--<p v-if="item.online && item.operatingState && item.reservedThree">{{item.reservedThree}}</p>-->
|
|
|
- <!--</div>-->
|
|
|
- <!--<div class="for-hardware-switch" v-if="item.online">-->
|
|
|
- <!--<el-switch-->
|
|
|
- <!--class="switch"-->
|
|
|
- <!--@click.native="changeIsNeedCaptcha(item)"-->
|
|
|
- <!--v-model="item.operatingState"-->
|
|
|
- <!--:active-value="true"-->
|
|
|
- <!--:inactive-value="false"-->
|
|
|
- <!--active-text="开启"-->
|
|
|
- <!--inactive-text="关闭"-->
|
|
|
- <!--disabled>-->
|
|
|
- <!--</el-switch>-->
|
|
|
- <!--</div>-->
|
|
|
- <!--</div>-->
|
|
|
- <!--</div>-->
|
|
|
- <!--</div>-->
|
|
|
<div class="for-hardware-big-box onLineColor"
|
|
|
v-for="(item,index) in hardwareList" :key="index">
|
|
|
<div class="for-hardware-box">
|
|
@@ -59,6 +31,37 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!--红外控制器-->
|
|
|
+ <el-dialog class="indexRightPage-hardwarePage-dialog" :title='infraredControllerTitle' width="460px" append-to-body
|
|
|
+ :visible.sync="infraredControllerType" v-if="infraredControllerType" @close="dialogOff()"
|
|
|
+ :close-on-click-modal="false" :close-on-press-escape="false">
|
|
|
+ <div class="infraredController-max-big-box">
|
|
|
+ <div class="infraredController-switchType-box">
|
|
|
+ <p class="switchType-name-p">{{infraredControllerForm.name}}</p>
|
|
|
+ <p class="switchType-type-p"
|
|
|
+ @click="switchTypeButton"
|
|
|
+ :class="infraredControllerForm.switchType == 1 ? '': 'switchType-type-off-p'">{{infraredControllerForm.switchType == 1 ? '开启':'关闭'}}</p>
|
|
|
+ </div>
|
|
|
+ <div style="overflow: hidden;height:130px;">
|
|
|
+ <div class="infraredController-functionType-box" v-if="infraredControllerForm.switchType == 1">
|
|
|
+ <p :class="infraredControllerForm.functionType == item.value?'check-button':''"
|
|
|
+ @click="functionButton(item.value)"
|
|
|
+ v-for="(item,index) in infraredControllerData.functionList"
|
|
|
+ :key="index">{{item.label}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="infraredController-orderType-box" v-if="infraredControllerForm.switchType == 1 && (infraredControllerForm.functionType == 1 || infraredControllerForm.functionType == 2)">
|
|
|
+ <p class="order-minus" @click="minusTextButton()">-</p>
|
|
|
+ <p class="order-text" v-for="(item,index) in infraredControllerData.orderList" :key="index" v-if="infraredControllerForm.orderType == item.value">{{item.label}}</p>
|
|
|
+ <p class="order-add" @click="addTextButton()">+</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer dialog-footer-box">
|
|
|
+ <p class="dialog-footer-button-null"></p>
|
|
|
+ <p class="dialog-footer-button-primary" @click="dialogSubmit">确定</p>
|
|
|
+ <p class="dialog-footer-button-null"></p>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -77,6 +80,34 @@
|
|
|
mtOpic:"iot/hardware/all/sub/",
|
|
|
client:{},
|
|
|
hardwareList:[],
|
|
|
+ //红外控制器相关
|
|
|
+ infraredControllerType:true,
|
|
|
+ infraredControllerTitle:"",
|
|
|
+ infraredControllerForm:{
|
|
|
+ name:'空调控制器空调控制器空调控制器空调控制器空调控制器空调控制器',//设备名称
|
|
|
+ switchType:1,//0.关 1.开
|
|
|
+ functionType:'1', //1.制冷 2.制热 3.通风
|
|
|
+ orderType:18, //温度指令
|
|
|
+ },
|
|
|
+ infraredControllerData:{
|
|
|
+ functionList:[
|
|
|
+ {label:'制冷',value:'1'},
|
|
|
+ {label:'制热',value:'2'},
|
|
|
+ {label:'通风',value:'3'},
|
|
|
+ ],
|
|
|
+ orderList:[
|
|
|
+ {label:"18°C",value:18},
|
|
|
+ {label:"19°C",value:19},
|
|
|
+ {label:"20°C",value:20},
|
|
|
+ {label:"21°C",value:21},
|
|
|
+ {label:"22°C",value:22},
|
|
|
+ {label:"23°C",value:23},
|
|
|
+ {label:"24°C",value:24},
|
|
|
+ {label:"25°C",value:25},
|
|
|
+ {label:"26°C",value:26},
|
|
|
+ {label:"27°C",value:27},
|
|
|
+ ],
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
created(){
|
|
@@ -90,6 +121,51 @@
|
|
|
this.iotHardwareFindByType();
|
|
|
this.offMQTT('on');
|
|
|
},
|
|
|
+ //红外控制器操作相关
|
|
|
+ //弹层关闭
|
|
|
+ dialogOff(){
|
|
|
+ this.$set(this,'infraredControllerType',false);
|
|
|
+ },
|
|
|
+ //弹层开启
|
|
|
+ dialogOpen(){
|
|
|
+ this.dialogFormReset();
|
|
|
+ this.$set(this,'infraredControllerTitle','空调控制');
|
|
|
+ this.$set(this,'infraredControllerType',true);
|
|
|
+ },
|
|
|
+ dialogSubmit(){
|
|
|
+ let text = '';
|
|
|
+ if(this.infraredControllerForm.switchType == 1){
|
|
|
+ if(this.infraredControllerForm.functionType != 3){
|
|
|
+ text = '1-' + this.infraredControllerForm.functionType + '-' + this.infraredControllerForm.orderType;
|
|
|
+ }else {
|
|
|
+ text = '1-3';
|
|
|
+ }
|
|
|
+ }else if(this.infraredControllerForm.switchType == 0){
|
|
|
+ text = '0';
|
|
|
+ }
|
|
|
+ console.log('text',text)
|
|
|
+ },
|
|
|
+ //开关切换
|
|
|
+ switchTypeButton(){
|
|
|
+ this.$set(this.infraredControllerForm,'switchType',!this.infraredControllerForm.switchType);
|
|
|
+ },
|
|
|
+ //状态切换
|
|
|
+ functionButton(value){
|
|
|
+ if(this.infraredControllerForm.functionType != value){
|
|
|
+ this.$set(this.infraredControllerForm,'functionType',value);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //指令切换
|
|
|
+ minusTextButton(){
|
|
|
+ if(this.infraredControllerForm.orderType>18){
|
|
|
+ this.infraredControllerForm.orderType--
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addTextButton(){
|
|
|
+ if(this.infraredControllerForm.orderType<27){
|
|
|
+ this.infraredControllerForm.orderType++
|
|
|
+ }
|
|
|
+ },
|
|
|
//查询硬件数据
|
|
|
iotHardwareFindByType(){
|
|
|
iotHardwareFindByType({subjectId:this.$parent.subId}).then(response => {
|
|
@@ -317,4 +393,86 @@
|
|
|
margin-left: -16px!important;
|
|
|
}
|
|
|
}
|
|
|
+ .indexRightPage-hardwarePage-dialog{
|
|
|
+ .infraredController-max-big-box{
|
|
|
+ font-size:16px;
|
|
|
+ .infraredController-switchType-box{
|
|
|
+ display: flex;
|
|
|
+ p{
|
|
|
+ line-height:30px;
|
|
|
+ }
|
|
|
+ .switchType-name-p{
|
|
|
+ font-size:18px;
|
|
|
+ flex:1;
|
|
|
+ display:block;
|
|
|
+ overflow:hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space:nowrap;
|
|
|
+ }
|
|
|
+ .switchType-type-p{
|
|
|
+ cursor: pointer;
|
|
|
+ width:80px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius:6px;
|
|
|
+ background-color: #fff;
|
|
|
+ border:1px solid #0183FB;
|
|
|
+ color:#0183FB;
|
|
|
+ }
|
|
|
+ .switchType-type-off-p{
|
|
|
+ background-color: #fff!important;
|
|
|
+ border:1px solid #999!important;
|
|
|
+ color:#999!important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .infraredController-functionType-box{
|
|
|
+ margin-top:20px;
|
|
|
+ display: flex;
|
|
|
+ p{
|
|
|
+ border-radius:6px;
|
|
|
+ background-color: #fff;
|
|
|
+ border:1px solid #999;
|
|
|
+ color:#333;
|
|
|
+ line-height:40px;
|
|
|
+ width:130px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left:14px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ p:nth-child(1){
|
|
|
+ margin-left:0!important;
|
|
|
+ }
|
|
|
+ .check-button{
|
|
|
+ background-color: #0183FB!important;
|
|
|
+ border:1px solid #0183FB!important;
|
|
|
+ color:#fff!important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .infraredController-orderType-box{
|
|
|
+ margin-top:20px;
|
|
|
+ display: flex;
|
|
|
+ p{
|
|
|
+ text-align: center;
|
|
|
+ line-height:40px;
|
|
|
+ width:60px;
|
|
|
+ }
|
|
|
+ .order-minus{
|
|
|
+ cursor: pointer;
|
|
|
+ border:1px solid #999;
|
|
|
+ border-top-left-radius: 6px;
|
|
|
+ border-bottom-left-radius: 6px;
|
|
|
+ }
|
|
|
+ .order-text{
|
|
|
+ width:300px;
|
|
|
+ border-top:1px solid #999;
|
|
|
+ border-bottom:1px solid #999;
|
|
|
+ }
|
|
|
+ .order-add{
|
|
|
+ cursor: pointer;
|
|
|
+ border:1px solid #999;
|
|
|
+ border-top-right-radius: 6px;
|
|
|
+ border-bottom-right-radius: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|