|
|
|
@ -2,9 +2,9 @@ |
|
|
|
<view class="switch-manage"> |
|
|
|
<store-name></store-name> |
|
|
|
<view class="sm-tit">{{pageInfo.name || '-'}}</view> |
|
|
|
<view class="sm-tip" v-if="pageInfo.longOpenName">*长开表示不再被系统智能控制，只有手动关闭后才会被智能控制。请谨慎操作。</view> |
|
|
|
<view class="sm-tip" v-if="pageInfo.longOpenName"><text>*</text>长开表示不再被系统智能控制，只有手动关闭后才会被智能控制。请谨慎操作。</view> |
|
|
|
<view class="sm-list"> |
|
|
|
<view class="sl-item" v-for="(e, i) in deviceList" :key="i" :style="{width:getViewWidth()}"> |
|
|
|
<view v-for="(e, i) in deviceList" :key="i" :class="[ 'sl-item', pageInfo.iconNum<=2?'sl-limit':'' ]"> |
|
|
|
|
|
|
|
<view class="si-top" > |
|
|
|
<image mode="aspectFit" :src="getIcon()" ></image> |
|
|
|
@ -25,23 +25,31 @@ |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 不同设备的可操作按钮区分,目前无明显规律,so 按需求单独 if 判断 --> |
|
|
|
<view class="si-bottom" v-if="pageInfo.isOpen || pageInfo.isClose || pageInfo.isDetail||pageInfo.isTiming"> |
|
|
|
<view v-if="pageInfo.isOpen" @click="operateBtn({ switchInfo: e, status: 1 })" :style="{width:getIconWidth()}"> |
|
|
|
<view class="si-bottom" v-if="pageInfo.isOpen || pageInfo.isClose || pageInfo.isDetail||pageInfo.isTiming || pageInfo.isElectrify || pageInfo.isOutage"> |
|
|
|
<view v-if="pageInfo.isOpen" @click="operateBtn({ switchInfo: e, status: 1 })"> |
|
|
|
<image mode="aspectFit" :src="pageInfo.openIcon || ''"></image> |
|
|
|
<view>{{pageInfo.openName || '-'}}</view> |
|
|
|
</view> |
|
|
|
<view v-if="pageInfo.isClose" @click="operateBtn({ switchInfo: e, status: 0 })" :style="{width:getIconWidth()}"> |
|
|
|
<view v-if="pageInfo.isClose" @click="operateBtn({ switchInfo: e, status: 0 })"> |
|
|
|
<image mode="aspectFit" :src="pageInfo.closeIcon || ''"></image> |
|
|
|
<view>{{pageInfo.closeName || '-'}}</view> |
|
|
|
</view> |
|
|
|
<view v-if="pageInfo.isLongOpen" @click="operateBtn({ switchInfo: e, status: 2 })" :style="{width:getIconWidth()}"> |
|
|
|
<view v-if="pageInfo.isLongOpen" @click="operateBtn({ switchInfo: e, status: 2 })"> |
|
|
|
<image mode="aspectFit" :src="pageInfo.longOpenIcon || ''"></image> |
|
|
|
<view>{{pageInfo.longOpenName || '-'}}</view> |
|
|
|
</view> |
|
|
|
<view v-if="pageInfo.isTiming" @click="operateBtn({ switchInfo: e, status: 3 })" :style="{width:getIconWidth()}"> |
|
|
|
<view v-if="pageInfo.isTiming" @click="operateBtn({ switchInfo: e, status: 3 })"> |
|
|
|
<image mode="aspectFit" :src="pageInfo.timingIcon || ''"></image> |
|
|
|
<view>{{pageInfo.timingName || '-'}}</view> |
|
|
|
</view> |
|
|
|
<view v-if="pageInfo.isElectrify" @click="operateBtn({ switchInfo: e, status: 5 })"> |
|
|
|
<image mode="aspectFit" :src="pageInfo.electrifyIcon || ''"></image> |
|
|
|
<view>{{pageInfo.electrifyName || '-'}}</view> |
|
|
|
</view> |
|
|
|
<view v-if="pageInfo.isOutage" @click="operateBtn({ switchInfo: e, status: 6 })"> |
|
|
|
<image mode="aspectFit" :src="pageInfo.outageIcon || ''"></image> |
|
|
|
<view>{{pageInfo.outageName || '-'}}</view> |
|
|
|
</view> |
|
|
|
<view v-if="pageInfo.isDetail" @click="operateBtn({ switchInfo: e, status: 4 })" class="btn-detail"> |
|
|
|
<view >{{pageInfo.detailName || '-'}}</view> |
|
|
|
</view> |
|
|
|
@ -76,9 +84,7 @@ export default { |
|
|
|
curStoreInfo: state => state.device.curStoreInfo, |
|
|
|
}), |
|
|
|
getIconWidth(){//计算操作icon的宽度 |
|
|
|
return ()=>{ |
|
|
|
return 100/this.pageInfo.iconNum+'%' |
|
|
|
} |
|
|
|
return '' |
|
|
|
}, |
|
|
|
getLotStatus(){//sim卡状态, 0 : 华为文档中没有 |
|
|
|
return (e)=>{ |
|
|
|
@ -107,29 +113,42 @@ export default { |
|
|
|
deviceList: [], |
|
|
|
} |
|
|
|
}, |
|
|
|
/** |
|
|
|
* |
|
|
|
* @param {Object} options |
|
|
|
* @param {Object} options.sid // 设备 id |
|
|
|
* @param {Object} options.stadium_id // 店铺 id |
|
|
|
*/ |
|
|
|
onLoad(options){ |
|
|
|
let _pageInfo = getShowArr(`s${options.sid}`) || {}; |
|
|
|
this.pageInfo = _pageInfo; |
|
|
|
uni.setNavigationBarTitle({ title: _pageInfo.name }); |
|
|
|
|
|
|
|
this.getDeviceList({ |
|
|
|
stadium_id: this.curStoreInfo.id, |
|
|
|
hardware_type: this.pageInfo.hardware_type |
|
|
|
stadium_id: options.stadium_id || this.curStoreInfo.id, |
|
|
|
hardware_type: _pageInfo.hardware_type |
|
|
|
}) |
|
|
|
setTimeout(_=>{ |
|
|
|
this.$nextTick(_=>{ |
|
|
|
uni.createSelectorQuery().selectAll(".si-bottom > view") |
|
|
|
.boundingClientRect(data => { |
|
|
|
console.warn('createSelectorQuery', data) |
|
|
|
}).exec(); |
|
|
|
|
|
|
|
}) |
|
|
|
}, 1000) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
isDetailBtn(e){ |
|
|
|
if(e&&e.toString() === "[object Object]"){ |
|
|
|
return e.hardware_model == 'XiaoHuiXiong' |
|
|
|
return e.hardware_model == 'XiaoHuiXiong' && e.hardware_type === 'Air'; |
|
|
|
} |
|
|
|
return false; |
|
|
|
}, |
|
|
|
toDeviceDetail(e){ |
|
|
|
console.warn(e); |
|
|
|
console.warn(this.getSwitchStatusQuery(e)); |
|
|
|
let _queryObj = this.getSwitchStatusQuery(e) || {}; |
|
|
|
if(!_queryObj.data || !_queryObj.data.name || !_queryObj.data.value)return; |
|
|
|
_queryObj.data.value&&_queryObj.data.value.op&&(_queryObj.data.value.op = 'info'); |
|
|
|
if(!_queryObj?.data?.name || !_queryObj?.data?.value)return; |
|
|
|
_queryObj?.data?.value?.op&&(_queryObj.data.value.op = 'info'); |
|
|
|
let _qrStr = util.jsonStr(_queryObj); |
|
|
|
if(e.hardware_type == "Air")return util.routeTo(`/subpackage/device/pages/air_conditioner/detail/detail?qrstr=${_qrStr}&name=${e.hardware_name || '-'}`, 'nT'); |
|
|
|
}, |
|
|
|
@ -490,25 +509,32 @@ function getShowArr(key){ |
|
|
|
id: 4, name: '门禁管理', isOpen: true, isClose: false, |
|
|
|
openIcon: '/subpackage/device/static/images/open.png', |
|
|
|
closeIcon: '/subpackage/device/static/images/close.png', |
|
|
|
openName: '开', closeName: '关', hardware_type: 'AccessControl',iconNum:2 |
|
|
|
openName: '开', closeName: '关', hardware_type: 'AccessControl',iconNum: 1 |
|
|
|
}, |
|
|
|
's5': { |
|
|
|
id: 5, name: '门闸管理', isOpen: true, isClose: true, |
|
|
|
id: 5, name: '门闸管理', isOpen: true, isClose: true, isElectrify: true, isOutage: true, |
|
|
|
hardware_type: 'GateControl',iconNum: 4, |
|
|
|
openIcon: '/subpackage/device/static/images/in.png', |
|
|
|
openName: '进', |
|
|
|
closeIcon: '/subpackage/device/static/images/out.png', |
|
|
|
openName: '进', closeName: '出', hardware_type: 'GateControl',iconNum:2 |
|
|
|
closeName: '出', |
|
|
|
electrifyIcon: '/subpackage/device/static/images/electrify.png', |
|
|
|
electrifyName: '通电', |
|
|
|
outageIcon: '/subpackage/device/static/images/outage.png', |
|
|
|
outageName: '断电', |
|
|
|
}, |
|
|
|
's6': {//TODO 等待接口 |
|
|
|
id: 6, name: '平板管理', isOpen: false, isClose: false, |
|
|
|
openIcon: '/subpackage/device/static/images/open.png', |
|
|
|
closeIcon: '/subpackage/device/static/images/close.png', |
|
|
|
openName: '开', closeName: '关', hardware_type: 'Router4G',iconNum:2 |
|
|
|
openName: '开', closeName: '关', hardware_type: 'Router4G',iconNum:1 |
|
|
|
}, |
|
|
|
's11': { |
|
|
|
id: 11, name: '水阀管理', isOpen: true, isClose: true,isLongOpen:true, isTiming:true, |
|
|
|
openIcon: '/subpackage/device/static/images/open.png', |
|
|
|
closeIcon: '/subpackage/device/static/images/close.png', |
|
|
|
longOpenIcon: '/subpackage/device/static/images/longOpen.png',timingIcon: '/subpackage/device/static/images/timing.png', |
|
|
|
longOpenIcon: '/subpackage/device/static/images/longOpen.png', |
|
|
|
timingIcon: '/subpackage/device/static/images/timing.png', |
|
|
|
openName: '开', closeName: '关', hardware_type: 'WaterValve',longOpenName: '长开', timingName: '定时',iconNum:4, |
|
|
|
}, |
|
|
|
's12': { |
|
|
|
@ -521,25 +547,25 @@ function getShowArr(key){ |
|
|
|
id: 13, name: '监控管理', isOpen: false, isClose: false, isDetail:true, |
|
|
|
openIcon: '/subpackage/device/static/images/open.png', |
|
|
|
closeIcon: '/subpackage/device/static/images/close.png', |
|
|
|
openName: '开', closeName: '关',detailName:"详情", hardware_type: 'IotSim',iconNum:2 |
|
|
|
openName: '开', closeName: '关',detailName:"详情", hardware_type: 'IotSim',iconNum:1 |
|
|
|
}, |
|
|
|
's17': {//TODO 等待接口 |
|
|
|
id: 17, name: '窗帘管理', isOpen: false, isClose: false, isDetail:true, |
|
|
|
openIcon: '/subpackage/device/static/images/open.png', |
|
|
|
closeIcon: '/subpackage/device/static/images/close.png', |
|
|
|
openName: '开', closeName: '关',detailName:"详情", hardware_type: 'Router4G',iconNum:2 |
|
|
|
openName: '开', closeName: '关',detailName:"详情", hardware_type: 'Router4G',iconNum:1 |
|
|
|
}, |
|
|
|
's18': { |
|
|
|
id: 18, name: '路由器管理', isOpen: false, isClose: false, isDetail:true, |
|
|
|
openIcon: '/subpackage/device/static/images/open.png', |
|
|
|
closeIcon: '/subpackage/device/static/images/close.png', |
|
|
|
openName: '开', closeName: '关',detailName:"详情", hardware_type: 'Router4G',iconNum:2 |
|
|
|
openName: '开', closeName: '关',detailName:"详情", hardware_type: 'Router4G',iconNum:1 |
|
|
|
}, |
|
|
|
's19': { |
|
|
|
id: 19, name: '物联卡管理', isOpen: false, isClose: false, isDetail:true, |
|
|
|
openIcon: '/subpackage/device/static/images/open.png', |
|
|
|
closeIcon: '/subpackage/device/static/images/close.png', |
|
|
|
openName: '开', closeName: '关',detailName:"详情", hardware_type: 'IotSim',iconNum:2 |
|
|
|
openName: '开', closeName: '关',detailName:"详情", hardware_type: 'IotSim',iconNum:1 |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
@ -550,6 +576,11 @@ function getShowArr(key){ |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
@import '~style/public.scss'; |
|
|
|
page{ |
|
|
|
background:url(../../static/images/page_bg.jpg) repeat-y; |
|
|
|
background-size: 100%; |
|
|
|
background-attachment: fixed; |
|
|
|
} |
|
|
|
.sm-tit{ |
|
|
|
padding-left: 40upx; |
|
|
|
padding-top: 52upx; |
|
|
|
@ -558,12 +589,16 @@ function getShowArr(key){ |
|
|
|
font-size: 44upx; |
|
|
|
font-weight: 500; |
|
|
|
color: #333; |
|
|
|
@include textHide(1); |
|
|
|
} |
|
|
|
.sm-tip{ |
|
|
|
padding: 0 40upx; |
|
|
|
font-size: 28upx; |
|
|
|
color: #979797; |
|
|
|
color: #fff; |
|
|
|
margin-bottom: 24upx; |
|
|
|
>text{ |
|
|
|
color: #EA5061; |
|
|
|
} |
|
|
|
} |
|
|
|
.sm-list{ |
|
|
|
padding: 0 32upx; |
|
|
|
@ -571,10 +606,15 @@ function getShowArr(key){ |
|
|
|
justify-content: space-between; |
|
|
|
flex-wrap: wrap ; |
|
|
|
.sl-item{ |
|
|
|
flex-grow: 1; |
|
|
|
margin-bottom: 30upx; |
|
|
|
width: 328upx; |
|
|
|
border-radius: 10upx; |
|
|
|
background-color: #fff; |
|
|
|
box-shadow: 0 4upx 12upx 0 #00987454, inset 0 0 40upx 0 #ffffff80; |
|
|
|
background-image: linear-gradient(180deg, #eff6f44d 0%, #FFFFFF 100%); |
|
|
|
&.sl-limit{ |
|
|
|
flex-grow: 0; |
|
|
|
width: 328upx !important; |
|
|
|
} |
|
|
|
.si-top{ |
|
|
|
padding: 20upx 20upx 30upx; |
|
|
|
display: flex; |
|
|
|
@ -647,11 +687,10 @@ function getShowArr(key){ |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
border-top: 2upx solid #F2F2F7; |
|
|
|
|
|
|
|
>view{ |
|
|
|
flex-shrink: 0; |
|
|
|
flex-grow: 0; |
|
|
|
width: 50%; |
|
|
|
padding: 0 30upx; |
|
|
|
>image{ |
|
|
|
display: block; |
|
|
|
margin: 0 auto 20upx; |
|
|
|
|
