iot-ui-app/pages/intelligent/template/light/light1.vue

216 lines
5.0 KiB
Vue

<template>
<view class="light-box" :style="{backgroundColor:bgcolor}">
<view class="header-box">
</view>
<view class="attr-box">
</view>
</view>
</template>
<script>
let attrList = [
{
"tenantId": 10151,
"createId": 10340,
"createBy": "hcwl",
"icon":"icon-gx-mingcheng",
"createTime": "2022-09-02 09:49:32",
"updateBy": "",
"updateTime": "2022-09-02 09:48:00",
"funId": 2694,
"sourceId": "adE134a38026GBDa",
"mainId": null,
"funName": "开关",
"funKey": "switch",
"funDataType": "BOOL",
"funDataTypeName": "布尔型",
"funRwType": "READWRITE",
"funRwTypeName": "可上报可下发",
"funValidType": "RANGE",
"funValidTypeName": "枚举校验",
"funValMin": null,
"funValMax": null,
"funObj": null,
"unitName": null,
"funValAcc": null,
"lastValue": false,
"lastTime": null
},
{
"tenantId": 10152,
"createId": 10341,
"createBy": "hcwl",
"icon":"icon-gx-mingcheng",
"createTime": "2022-09-02 09:49:32",
"updateBy": "",
"updateTime": "2022-09-02 09:48:00",
"funId": 2694,
"sourceId": "adE134a38026GBDa",
"mainId": null,
"funName": "亮度",
"funKey": "brightness",
"funDataType": "int",
"funDataTypeName": "整数型",
"funRwType": "READWRITE",
"funRwTypeName": "可上报可下发",
"funValidType": "RANGE",
"funValidTypeName": "范围校验",
"funValMin": 0,
"funValMax": 100,
"funObj": null,
"unitName": null,
"funValAcc": null,
"lastValue": 100,
"lastTime": null
},
{
"tenantId": 10153,
"createId": 10342,
"createBy": "hcwl",
"icon":"icon-gx-mingcheng",
"createTime": "2022-09-02 09:49:32",
"updateBy": "",
"updateTime": "2022-09-02 09:48:00",
"funId": 2694,
"sourceId": "adE134a38026GBDa",
"mainId": null,
"funName": "颜色",
"funKey": "color",
"funDataType": "TEXT",
"funDataTypeName": "字符串",
"funRwType": "READWRITE",
"funRwTypeName": "可上报可下发",
"funValidType": "RANGE",
"funValidTypeName": "范围校验",
"funValMin": null,
"funValMax": null,
"funObj": null,
"unitName": null,
"funValAcc": null,
"lastValue": '#ffffff',
"lastTime": null
},
{
"tenantId": 10154,
"createId": 10343,
"createBy": "hcwl",
"icon":"icon-gx-kaiguan",
"createTime": "2022-09-02 09:49:32",
"updateBy": "",
"updateTime": "2022-09-02 09:48:00",
"funId": 2694,
"sourceId": "adE134a38026GBDa",
"mainId": null,
"funName": "我的模式",
"funKey": "mode",
"funDataType": "OBJ",
"funDataTypeName": "对象型",
"funRwType": "READWRITE",
"funRwTypeName": "可上报可下发",
"funValidType": "ENUM",
"funValidTypeName": "枚举校验",
"funValMin": null,
"funValMax": null,
"funObj": "[{\"name\":\"睡眠模式\",\"color\":\"#ffff00\",\"brightness\":30},{\"name\":\"观影模式\",\"color\":\"#ffff00\",\"brightness\":50},{\"name\":\"阅读模式\",\"color\":\"#ffffff\",\"brightness\":50},{\"name\":\"办公模式\",\"color\":\"#ffffff\",\"brightness\":100}]",
"unitName": null,
"funValAcc": null,
"lastValue": {
"name":"睡眠模式",
"color":"#ffff00",
"brightness":30
},
"lastTime": null
},
{
"tenantId": 10152,
"createId": 10341,
"createBy": "hcwl",
"icon":"icon-gx-mingcheng",
"createTime": "2022-09-02 09:49:32",
"updateBy": "",
"updateTime": "2022-09-02 09:48:00",
"funId": 2694,
"sourceId": "adE134a38026GBDa",
"mainId": null,
"funName": "定时",
"funKey": "calmTime",
"funDataType": "int",
"funDataTypeName": "整数型",
"funRwType": "READWRITE",
"funRwTypeName": "可上报可下发",
"funValidType": "RANGE",
"funValidTypeName": "范围校验",
"funValMin": 0,
"funValMax": 100,
"funObj": null,
"unitName": null,
"funValAcc": null,
"lastValue": null,
"lastTime": null
},
]
// [
// {
// "name":"睡眠模式",
// "color":"#ffff00",
// "brightness":30
// },{
// "name":"观影模式",
// "color":"#ffff00",
// "brightness":50
// },{
// "name":"阅读模式",
// "color":"#ffffff",
// "brightness":50
// },{
// "name":"办公模式",
// "color":"#ffffff",
// "brightness":100
// }
// ]
export default{
data(){
return {
color:"#ffff00",
brightness:100,
}
},
onLoad(option) {
if(option.name){
// 修改页面标题
uni.setNavigationBarTitle({
title: option.name
});
}
},
computed:{
bgcolor(){
let bgcolor = this.hexToRgba(this.color,this.brightness*0.01);
return bgcolor;
}
},
methods:{
hexToRgba(hex, opacity) {
return 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ',' + parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ')'
}
}
}
</script>
<style>
page{
height: 100%;
}
</style>
<style lang="scss" scoped>
.light-box{
height: 100%;
}
</style>