<!--设备详情弹窗-->
<template>
<el-dialog title="设备详情" width=" 1080px" :visible.sync="isShowInfo" append-to-body @close="close">
<div class="deviceDialog ">
<div class="headInfo">
<div class="inputContent">
<input-vue v-model="rowInfo.brandCode" title="设备型号" width="200px" :disabled="true" readable/>
<input-vue v-model="rowInfo.deviceName" title="设备名称" width="200px" :disabled="true" readable />
<input-vue v-model="rowInfo.snCode" title="SN码" width="200px" :disabled="true" readable />
</div>
<div class="inputContent">
<input-vue v-model="rowInfo.deviceStatus" title=" 设备状态" width="200px" :disabled="true" readable />
<input-vue
v-model="rowInfo.deviceAddress"
:disabled="true"
title=" 设备位置"
width="552px"
style="flex: 1; margin-left: 63px"
readable
/>
</div>
</div>
<div class="content">
<el-tabs v-model="navSelect" type="card" @tab-click="handleClick" style="margin-top:20px">
<el-tab-pane label="基本信息" name="0">
<div class="content_content baseInfo">
<div class="inputContent">
<input-vue
v-model="rowInfo.brandName"
title="设备品牌"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.createTime"
title="生产日期"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.deviceMac"
title="Mac地址"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.productCode"
title="产品品类"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<!-- <input-vue title="产品重量" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue>
<input-vue title="产品材质" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
</div>
<div class="inputContent">
<input-vue
v-model="rowInfo.deviceHardwareVersion"
title="硬件版本"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.deviceName"
title="设备名称"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.deviceIp"
title="IP地址"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<!-- <input-vue title="国际69码" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
<input-vue
v-model="rowInfo.deviceStatus"
title="产品状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<!-- <input-vue title="产品颜色" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
</div>
<div class="inputContent">
<input-vue
v-model="rowInfo.deviceSoftwareVersion"
title="软件版本"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<!-- <input-vue title="供应商" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
<div style="height: 40px;" />
<!-- <input-vue title="产品尺寸" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
<input-vue
v-model="rowInfo.serialVersionUID"
title="产品版本"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<div style="height: 40px;" />
</div>
</div>
</el-tab-pane>
<el-tab-pane label="设备信息" name="1">
<div class="content_content">
<div class="deviceInfo">
<div class="inputContent">
<input-vue
v-model="rowInfo.deviceActive"
title="是否激活"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.deviceBindUser"
title="是否绑定用户"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<!-- <input-vue title="用户手机号" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
</div>
<div class="inputContent">
<input-vue
v-model="rowInfo.deviceActiveTime"
title="激活时间"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<!-- <input-vue title="用户账号" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
</div>
<div class="inputContent">
<input-vue
v-model="rowInfo.createTime"
title="用户名称"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<!-- <input-vue title="绑定时间" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane v-if="rowInfo.businessExt" label="数据信息" name="2">
<div class="content_content">
<div>
<div v-if="rowInfo.deviceName == '油烟机' " class="deviceInfo">
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.workStatus"
title="工作状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.wifiStatus"
title="wifi状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.switchStatus"
title="开关机状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
</div>
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.runTime"
title="运行时长"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.wifiName"
title="wifi名称"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
</div>
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.smokeStove"
title="烟灶联动"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.oilPouringReminder"
title="倒油提醒开关"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
</div>
</div>
<div v-if="rowInfo.deviceName == '热水器' " class="deviceInfo">
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.workStatus"
title="工作状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.currentTemperature"
title="当前温度"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.switchStatus"
title="零冷水开关"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
</div>
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.runTime"
title="运行时长"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<!-- <input-vue title="进水温度" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
</div>
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.workMode"
title="当前模式"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<!-- <input-vue title="出水温度" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
</div>
</div>
<div v-if="rowInfo.deviceName == '燃气灶' " class="deviceInfo">
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.workStatus"
title="工作状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.leftWorkStatus"
title="左灶工作状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
</div>
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.smokeStove"
title="烟灶联动"
width="200px"
style="justify-content: space-between;"
:disabled="true"
/>
<input-vue
v-model="rowInfo.businessExt.rightWorkStatus"
title="右灶工作状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
</div>
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.runTime"
title="运行时长"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<!-- <input-vue title="出水温度" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
</div>
</div>
<div v-if="rowInfo.deviceName == '壁挂炉' " class="deviceInfo">
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.workStatus"
title="工作状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.heatingStatus"
title="供暖"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.bathroomTemp"
title="卫浴温度"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
</div>
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.heatingTemp"
title="供暖温度"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.bathroomStatus"
title="卫浴状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.waterPumpStatus"
title="水泵状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
</div>
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.antifreezeStatus"
title="防冻状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.fanStatus"
title="风机状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
<div class="content_content">
<div v-if="navSelect == 0" class="baseInfo">
</div>
<div v-if="navSelect == 2 ">
<div v-if="rowInfo.deviceName == '油烟机' " class="deviceInfo">
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.workStatus"
title="工作状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.wifiStatus"
title="wifi状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.switchStatus"
title="开关机状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
</div>
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.runTime"
title="运行时长"
width="200px"
style="justify-content: space-between;"
:disabled="true"
/>
<input-vue
v-model="rowInfo.businessExt.wifiName"
title="wifi名称"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
</div>
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.smokeStove"
title="烟灶联动"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.oilPouringReminder"
title="倒油提醒开关"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
</div>
</div>
<div v-if="rowInfo.deviceName == '热水器' " class="deviceInfo">
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.workStatus"
title="工作状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.currentTemperature"
title="当前温度"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.switchStatus"
title="零冷水开关"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
</div>
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.runTime"
title="运行时长"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<!-- <input-vue title="进水温度" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
</div>
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.workMode"
title="当前模式"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<!-- <input-vue title="出水温度" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
</div>
</div>
<div v-if="rowInfo.deviceName == '燃气灶' " class="deviceInfo">
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.workStatus"
title="工作状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.leftWorkStatus"
title="左灶工作状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
</div>
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.smokeStove"
title="烟灶联动"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.rightWorkStatus"
title="右灶工作状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
/>
</div>
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.runTime"
title="运行时长"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<!-- <input-vue title="出水温度" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
</div>
</div>
<div v-if="rowInfo.deviceName == '壁挂炉' " class="deviceInfo">
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.workStatus"
title="工作状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.heatingStatus"
title="供暖"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.bathroomTemp"
title="卫浴温度"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
</div>
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.heatingTemp"
title="供暖温度"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.bathroomStatus"
title="卫浴状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.waterPumpStatus"
title="水泵状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
</div>
<div class="inputContent">
<input-vue
v-model="rowInfo.businessExt.antifreezeStatus"
title="防冻状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
<input-vue
v-model="rowInfo.businessExt.fanStatus"
title="风机状态"
width="200px"
style="justify-content: space-between;"
:disabled="true"
readable
/>
</div>
</div>
</div>
</div>
</div>
</div>
</el-dialog>
</template>
<script>
import inputVue from '../input/inputVue.vue'
import { d_info } from '../../../api/product/device'
export default {
components: {
inputVue
},
props: {
isShowInfo: {
type: Boolean,
default: 'false'
},
dataInfo: {}
},
data() {
return {
navSelect: '0', // 0 1 2 为导航栏的选项
rowInfo: {}
}
},
watch: {
dataInfo: {
handler(newValue) {
d_info({ id: newValue.id }).then(res => {
console.log(res)
this.rowInfo = res
// 数据处理
this.rowInfo.deviceActive = this.dealstate(this.rowInfo.deviceActive)
this.rowInfo.deviceBindUser = this.dealstate(this.rowInfo.deviceBindUser)
this.rowInfo.businessExt.switchStatus = this.dealwitch(this.rowInfo.businessExt.switchStatus)
this.rowInfo.businessExt.oilPouringReminder = this.dealwitch(this.rowInfo.businessExt.oilPouringReminder)
})
},
// 深度监听
deep: true,
immediate: true
}
},
methods: {
changeNav(index) {
this.navSelect = index
},
close() {
this.$emit('close')
},
dealwitch(index) {
if (index == 0) {
return '关'
} else {
return '开'
}
},
dealstate(index) {
if (index == 0) {
return '否'
} else {
return '是'
}
}
}
}
</script>
<style lang="scss" scoped>
.deviceDialog {
border-radius: 5px;
// overflow: hidden;
// padding: 10px 0;
width: 1025px;
height: 600px;
box-sizing: border-box;
}
.selectNav {
border: 1px solid #999;
border-bottom: 3px solid #fff;
position: relative;
z-index: 9;
box-sizing: border-box;
top: 2px;
}
.content {
width: 100%;
.content_nav {
box-sizing: border-box;
display: flex;
margin: 10px 0;
border-bottom: 1px solid #999;
.nav_item {
width: 130px;
height: 60px;
margin: 0 10px;
line-height: 60px;
text-align: center;
}
}
}
.content_content {
padding: 0px 10px;
// padding: 20px 0 60px 0;
// box-sizing: border-box;
}
.headInfo {
width: 1000px;
.inputContent {
// flex: 1;
display: flex;
// flex-direction: column;
justify-content: space-between;
align-items: center;
}
}
.baseInfo {
width: 1000px;
display: flex;
.inputContent {
flex: 1;
display: flex;
flex-direction: column;
// justify-content: space-between;
// align-items: center;
}
}
.deviceInfo {
display: flex;
// align-items: center;
justify-content: space-between;
height: 100%;
.inputContent {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
.dataInfo {
display: flex;
// align-items: center;
justify-content: space-between;
height: 100%;
.inputContent {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
</style>
