1054 lines
32 KiB
Vue
1054 lines
32 KiB
Vue
<template>
|
|
<view class="public1">
|
|
<view class="attr-list">
|
|
<view class="attr-list-item" v-for="(item,index) in dataList" :key="index">
|
|
<!-- v-if="((item.funDataType == 'INT32' || item.funDataType == 'TEXT') || item.funDataType == 'BOOL') && item.funValidType == 'ENUM'" -->
|
|
<!-- 选择器 -->
|
|
<iots-select
|
|
v-if="item.funComponentType == 'select'"
|
|
:name="item.funName"
|
|
:icon="item.icon"
|
|
v-model="item.lastValue"
|
|
:selectList="formatSelect(item,index)"
|
|
@change="changeIotSelect($event,index)"
|
|
></iots-select>
|
|
<!-- v-else-if="item.funDataType == 'INT32' || item.funDataType == 'FLOAT'" -->
|
|
<!-- 步进器 -->
|
|
<iots-number-box
|
|
v-else-if="item.funComponentType == 'numberbox'"
|
|
:name="item.funName"
|
|
:icon="item.icon"
|
|
:min="item.funValMin"
|
|
:max="item.funValMax"
|
|
v-model="item.lastValue"
|
|
@change="changeIotNumber($event,index)"
|
|
></iots-number-box>
|
|
<!-- 颜色选择 -->
|
|
<iots-color-select
|
|
v-else-if="item.funComponentType == 'color-select'"
|
|
:name="item.funName"
|
|
:icon="item.icon"
|
|
v-model="item.lastValue"
|
|
@change="changeIotColorSelect($event,index)"
|
|
></iots-color-select>
|
|
<!-- 开关 -->
|
|
<iots-switch
|
|
v-else-if="item.funComponentType == 'switch'"
|
|
:name="item.funName"
|
|
:icon="item.icon"
|
|
v-model="item.lastValue"
|
|
@change="changeIotSwitch($event,index)"
|
|
></iots-switch>
|
|
<!-- 开关按钮 -->
|
|
<iots-switch-btn
|
|
v-else-if="item.funComponentType == 'switch-btn'"
|
|
:name="item.funName"
|
|
:icon="item.icon"
|
|
v-model="item.lastValue"
|
|
@change="changeIotSwitchBtn($event,index)"
|
|
></iots-switch-btn>
|
|
<!-- 滑块 -->
|
|
<iots-slider
|
|
v-else-if="item.funComponentType == 'slider'"
|
|
:name="item.funName"
|
|
:icon="item.icon"
|
|
:min="item.funValMin"
|
|
:max="item.funValMax"
|
|
v-model="item.lastValue"
|
|
@change="changeIotSlider($event,index)"
|
|
></iots-slider>
|
|
<!-- 文字展示 -->
|
|
<iots-text
|
|
v-else-if="item.funComponentType == 'text'"
|
|
:name="item.funName"
|
|
:icon="item.icon"
|
|
:value="getParseText(item.lastValue)"
|
|
></iots-text>
|
|
<!-- 柱状图 -->
|
|
<iots-bar
|
|
v-else-if="item.funComponentType == 'bar'"
|
|
:name="item.funName"
|
|
:icon="item.icon"
|
|
:dataList="item.dataList"
|
|
:value="item.lastValue"
|
|
@change="changeIotBar($event,index)"
|
|
></iots-bar>
|
|
<!-- 折线图 -->
|
|
<iots-line
|
|
v-else-if="item.funComponentType == 'line'"
|
|
:name="item.funName"
|
|
:icon="item.icon"
|
|
:dataList="item.dataList"
|
|
:value="item.lastValue"
|
|
@change="changeIotLine($event,index)"
|
|
></iots-line>
|
|
<!-- 饼图 -->
|
|
<iots-pie
|
|
v-else-if="item.funComponentType == 'pie'"
|
|
:name="item.funName"
|
|
:icon="item.icon"
|
|
:dataList="item.dataList"
|
|
:value="item.lastValue"
|
|
@change="changeIotPie($event,index)"
|
|
></iots-pie>
|
|
<!-- 仪表盘 -->
|
|
<iots-gauge
|
|
v-else-if="item.funComponentType == 'gauge'"
|
|
:name="item.funName"
|
|
:icon="item.icon"
|
|
:dataList="item.dataList"
|
|
:value="item.lastValue"
|
|
@change="changeIotPie($event,index)"
|
|
></iots-gauge>
|
|
<!-- 输入框 -->
|
|
<iots-input
|
|
v-else-if="item.funComponentType == 'input'"
|
|
:name="item.funName"
|
|
:icon="item.icon"
|
|
:value="item.lastValue"
|
|
@change="changeIotInupt($event,index)"
|
|
></iots-input>
|
|
|
|
<view v-else class="attr-item">
|
|
<view class="attr-item-left">
|
|
<view class="iconfont" :class="item.icon?item.icon:'icon-gongnengdingyi'"></view>
|
|
<view class="attr-name">{{item.funName}}</view>
|
|
</view>
|
|
<view class="attr-item-right">
|
|
<!-- 选择项 -->
|
|
<!-- <view v-if="(item.funDataType == 'INT32' || item.funDataType == 'TEXT') && item.funValidType == 'ENUM'" class="attr-value item-select" @click="changeSelect(item,index)">
|
|
<text
|
|
:style="{color:item.lastValue?'#333':'#ccc'}">{{item.lastValue!=null?getVlaue(item):'请选择'}}</text>
|
|
<view class="iconfont icon-xiangyou1"></view>
|
|
</view> -->
|
|
<!-- 数字步进器 -->
|
|
<!-- <view v-if="item.funDataType == 'INT32' || item.funDataType == 'FLOAT'"
|
|
class="attr-value item-border item-number">
|
|
<number-box :integer="item.funDataType == 'FLOAT'?false:true"
|
|
:min="item.funValMin?item.funValMin:-99999"
|
|
:max="item.funValMax?item.funValMax:99999"
|
|
@changeValue="changeNumber($event,index)" style="width: 100%;height: 100%;"></number-box>
|
|
</view> -->
|
|
<!-- 输入框 -->
|
|
<!-- <view v-if="item.funDataType == 'TEXT'" class="attr-value item-border item-input">
|
|
<input type="text" placeholder="请输入" style="text-align: right;" v-model="item.lastValue" />
|
|
</view> -->
|
|
<!-- 布尔 -->
|
|
<!-- <view v-else-if="item.funDataType == 'BOOL' && item.funValidType == 'ENUM'"
|
|
class="attr-value item-border item-select" @click="changeSelect(item,index)">
|
|
<text
|
|
:style="{color:item.lastValue?'#333':'#ccc'}">{{item.lastValue!=null?getVlaue(item):'请选择'}}</text>
|
|
<view class="iconfont icon-xiangyou1"></view>
|
|
</view> -->
|
|
<!-- 图片 -->
|
|
<view v-if="item.funComponentType == 'img'" class="attr-value item-border item-img-box" >
|
|
<u-upload ref="uPloadimgRef" width="120" height="120" :action="imgUploadUrl" :file-list="imgList" max-count="1" @on-change="changeUploadImg"></u-upload>
|
|
<view class="iconfont icon-xiangyou1"></view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 数据日志 -->
|
|
<view class="attr-value item-border item-log">
|
|
<view class="item-log-header">
|
|
<text class="item-log-header-label">数据日志</text>
|
|
<view class="item-log-header-right">
|
|
<view class="iconfont icon-shuaxin" @click="resetLog"></view>
|
|
<view class="iconfont icon-shanchu" @click="clearLog"></view>
|
|
</view>
|
|
</view>
|
|
<scroll-view scroll-y="true" :scroll-top="scrollTop" class="item-log-box" :scroll-with-animation="true">
|
|
<view id="scroll-view-content">
|
|
<view v-if="logList&&logList.length>0" class="log-item" v-for="(logItem,index) in logList" :key="index">
|
|
{{logItem.time}}-{{logItem.txt}}
|
|
</view>
|
|
<view v-else class="log-item">
|
|
数据日志监听中···
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<!-- <u-select mode="single-column" :default-value="selectDefaultValue" v-model="selectShow" :list="selectList" @confirm="confirm"></u-select>
|
|
<u-popup v-model="colorShow" closeable="true" mode="bottom" border-radius="10" safe-area-inset-bottom="true">
|
|
<view class="">
|
|
<view class="" style="display: flex;justify-content: center;align-items: center;height: 40rpx;margin: 24rpx 0;font-weight: bold;font-size: 34rpx;">
|
|
选择颜色
|
|
</view>
|
|
<zebra-color-picker v-model="colors" @input="inputColor"></zebra-color-picker>
|
|
</view>
|
|
</u-popup> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import NumberBox from '@/components/number-box/NumberBox.vue'
|
|
import IotsSelect from '../../components/select/iots-select.vue'
|
|
import IotsNumberBox from "../../components/number-box/iots-number-box.vue"
|
|
import IotsColorSelect from "../../components/color/iots-color-select.vue"
|
|
import IotsSwitch from '../../components/switch/iots-switch.vue'
|
|
import IotsSlider from '../../components/slider/iots-slider.vue'
|
|
import IotsSwitchBtn from '../../components/switch-btn/iots-switch-btn.vue'
|
|
import IotsText from '../../components/text/iots-text.vue'
|
|
import IotsBar from '../../components/chart/bar/iots-bar.vue'
|
|
import IotsLine from '../../components/chart/line/iots-line.vue'
|
|
import IotsPie from '../../components/chart/pie/iots-pie.vue'
|
|
import IotsGauge from '../../components/chart/gauge/iots-gauge.vue'
|
|
import IotsInput from '../../components/input/iots-input.vue'
|
|
let attrList = [
|
|
{
|
|
"tenantId": 10151,
|
|
"createId": 10340,
|
|
"createBy": "hcwl",
|
|
"icon":"icon-mingcheng",
|
|
"createTime": "2022-09-02 09:49:32",
|
|
"updateBy": "",
|
|
"updateTime": "2022-09-02 09:48:00",
|
|
"funId": 2694,
|
|
"sourceId": "adE134a38026GBDa",
|
|
"mainId": null,
|
|
"funName": "名称",
|
|
"funKey": "name",
|
|
"funDataType": "TEXT",
|
|
"funComponentType": "input",
|
|
"funDataTypeName": "字符串",
|
|
"funRwType": "READWRITE",
|
|
"funRwTypeName": "可上报可下发",
|
|
"funValidType": "RANGE",
|
|
"funValidTypeName": "枚举校验",
|
|
"funValMin": null,
|
|
"funValMax": null,
|
|
"funObj": null,
|
|
"unitName": null,
|
|
"funValAcc": null,
|
|
"lastValue": null,
|
|
"dataList": null,
|
|
"lastTime": null
|
|
},{
|
|
"tenantId": 10168,
|
|
"createId": 10369,
|
|
"createBy": "hcwl",
|
|
"icon":"icon-bingtu-xianxing",
|
|
"createTime": "2022-09-02 09:49:32",
|
|
"updateBy": "",
|
|
"updateTime": "2022-09-02 09:48:00",
|
|
"funId": 2711,
|
|
"sourceId": "adE134a38026GBDa",
|
|
"mainId": null,
|
|
"funName": "仪表盘",
|
|
"funKey": "power",
|
|
"funDataType": "IMG",
|
|
"funComponentType": "gauge",
|
|
"funDataTypeName": "字符串",
|
|
"funRwType": "READWRITE",
|
|
"funRwTypeName": "可上报可下发",
|
|
"funValidType": "ENUM",
|
|
"funValidTypeName": "枚举校验",
|
|
"funValMin": null,
|
|
"funValMax": null,
|
|
"funObj": null,
|
|
"unitName": null,
|
|
"funValAcc": null,
|
|
"lastValue": 1,
|
|
"dataList": '{"categories": [{"value":0.2,"color":"#1890ff"},{"value":0.8,"color":"#2fc25b"},{"value":1,"color":"#f04864"}],"series": [{"name": "完成率","data": 0.66}]}',
|
|
"lastTime": null
|
|
},{
|
|
"tenantId": 10151,
|
|
"createId": 10340,
|
|
"createBy": "hcwl",
|
|
"icon":"icon-wendu",
|
|
"createTime": "2022-09-02 09:50:04",
|
|
"updateBy": "",
|
|
"updateTime": "2022-09-02 09:48:00",
|
|
"funId": 2695,
|
|
"sourceId": "adE134a38026GBDa",
|
|
"mainId": null,
|
|
"funName": "目标温度",
|
|
"funKey": "temperature",
|
|
"funDataType": "INT32",
|
|
"funComponentType": "numberbox",
|
|
"funDataTypeName": "整数型",
|
|
"funRwType": "READWRITE",
|
|
"funRwTypeName": "可上报可下发",
|
|
"funValidType": "RANGE",
|
|
"funValidTypeName": "范围校验",
|
|
"funValMin": 16,
|
|
"funValMax": 32,
|
|
"funObj": null,
|
|
"unitName": "℃",
|
|
"funValAcc": null,
|
|
"lastValue": null,
|
|
"dataList": null,
|
|
"lastTime": null
|
|
},
|
|
{
|
|
"tenantId": 10151,
|
|
"createId": 10340,
|
|
"createBy": "hcwl",
|
|
"icon":"icon-moshi",
|
|
"createTime": "2022-09-02 09:48:20",
|
|
"updateBy": "hcwl",
|
|
"updateTime": "2022-10-08 18:13:39",
|
|
"funId": 2693,
|
|
"sourceId": "adE134a38026GBDa",
|
|
"mainId": null,
|
|
"funName": "运行模式",
|
|
"funKey": "mode",
|
|
"funDataType": "TEXT",
|
|
"funComponentType": "select",
|
|
"funDataTypeName": "字符串",
|
|
"funRwType": "READWRITE",
|
|
"funRwTypeName": "可上报可下发",
|
|
"funValidType": "ENUM",
|
|
"funValidTypeName": "枚举校验",
|
|
"funValMin": null,
|
|
"funValMax": null,
|
|
"funObj": "{\\\"智能地暖\\\":\\\"智能地暖\\\",\\\"地暖\\\":\\\"地暖\\\",\\\"自动模式\\\":\\\"自动模式\\\",\\\"制热模式\\\":\\\"制热模式\\\",\\\"风扇模式\\\":\\\"风扇模式\\\",\\\"制冷模式\\\":\\\"制冷模式\\\",\\\"除湿模式\\\":\\\"除湿模式\\\"}",
|
|
"unitName": null,
|
|
"funValAcc": null,
|
|
"lastValue": null,
|
|
"dataList": null,
|
|
"lastTime": null
|
|
},
|
|
{
|
|
"tenantId": 10151,
|
|
"createId": 10340,
|
|
"createBy": "hcwl",
|
|
"icon":"icon-fengsu",
|
|
"createTime": "2022-09-02 09:48:00",
|
|
"updateBy": "hcwl",
|
|
"updateTime": "2022-10-08 18:13:50",
|
|
"funId": 2692,
|
|
"sourceId": "adE134a38026GBDa",
|
|
"mainId": null,
|
|
"funName": "风速",
|
|
"funKey": "speed",
|
|
"funDataType": "TEXT",
|
|
"funComponentType": "select",
|
|
"funDataTypeName": "字符串",
|
|
"funRwType": "READWRITE",
|
|
"funRwTypeName": "可上报可下发",
|
|
"funValidType": "ENUM",
|
|
"funValidTypeName": "枚举校验",
|
|
"funValMin": null,
|
|
"funValMax": null,
|
|
"funObj": "{\\\"运行高风\\\":\\\"运行高风\\\",\\\"运行自动风\\\":\\\"运行自动风\\\",\\\"运行中风\\\":\\\"运行中风\\\",\\\"运行低风\\\":\\\"运行低风\\\"}",
|
|
"unitName": null,
|
|
"funValAcc": null,
|
|
"lastValue": null,
|
|
"dataList": null,
|
|
"lastTime": null
|
|
},
|
|
{
|
|
"tenantId": 10151,
|
|
"createId": 10340,
|
|
"createBy": "hcwl",
|
|
"icon":"icon-kaiguan",
|
|
"createTime": "2022-09-02 09:49:32",
|
|
"updateBy": "",
|
|
"updateTime": "2022-09-02 09:48:00",
|
|
"funId": 2694,
|
|
"sourceId": "adE134a38026GBDa",
|
|
"mainId": null,
|
|
"funName": "电源状态",
|
|
"funKey": "power",
|
|
"funDataType": "BOOL",
|
|
"funComponentType": "select",
|
|
"funDataTypeName": "布尔型",
|
|
"funRwType": "READWRITE",
|
|
"funRwTypeName": "可上报可下发",
|
|
"funValidType": "ENUM",
|
|
"funValidTypeName": "枚举校验",
|
|
"funValMin": null,
|
|
"funValMax": null,
|
|
"funObj": "{\\\"false\\\":\\\"关\\\",\\\"true\\\":\\\"开\\\"}",
|
|
"unitName": null,
|
|
"funValAcc": null,
|
|
"lastValue": null,
|
|
"dataList": null,
|
|
"lastTime": null
|
|
},
|
|
{
|
|
"tenantId": 10151,
|
|
"createId": 10340,
|
|
"createBy": "hcwl",
|
|
"icon":"icon-tupian1",
|
|
"createTime": "2022-09-02 09:49:32",
|
|
"updateBy": "",
|
|
"updateTime": "2022-09-02 09:48:00",
|
|
"funId": 2694,
|
|
"sourceId": "adE134a38026GBDa",
|
|
"mainId": null,
|
|
"funName": "图片",
|
|
"funKey": "power",
|
|
"funDataType": "IMG",
|
|
"funComponentType": "img",
|
|
"funDataTypeName": "图片",
|
|
"funRwType": "READWRITE",
|
|
"funRwTypeName": "可上报可下发",
|
|
"funValidType": "ENUM",
|
|
"funValidTypeName": "枚举校验",
|
|
"funValMin": null,
|
|
"funValMax": null,
|
|
"funObj": null,
|
|
"unitName": null,
|
|
"funValAcc": null,
|
|
"lastValue": null,
|
|
"dataList": null,
|
|
"lastTime": null
|
|
},
|
|
{
|
|
"tenantId": 10152,
|
|
"createId": 10343,
|
|
"createBy": "hcwl",
|
|
"icon":"icon-yanse",
|
|
"createTime": "2022-09-02 09:49:32",
|
|
"updateBy": "",
|
|
"updateTime": "2022-09-02 09:48:00",
|
|
"funId": 2694,
|
|
"sourceId": "adE134a38026GBDa",
|
|
"mainId": null,
|
|
"funName": "颜色",
|
|
"funKey": "power",
|
|
"funDataType": "IMG",
|
|
"funComponentType": "color-select",
|
|
"funDataTypeName": "字符串",
|
|
"funRwType": "READWRITE",
|
|
"funRwTypeName": "可上报可下发",
|
|
"funValidType": "ENUM",
|
|
"funValidTypeName": "枚举校验",
|
|
"funValMin": null,
|
|
"funValMax": null,
|
|
"funObj": null,
|
|
"unitName": null,
|
|
"funValAcc": null,
|
|
"lastValue": null,
|
|
"dataList": null,
|
|
"lastTime": null
|
|
},
|
|
{
|
|
"tenantId": 10152,
|
|
"createId": 10343,
|
|
"createBy": "hcwl",
|
|
"icon":"icon-xitongzhuangtai",
|
|
"createTime": "2022-09-02 09:49:32",
|
|
"updateBy": "",
|
|
"updateTime": "2022-09-02 09:48:00",
|
|
"funId": 2694,
|
|
"sourceId": "adE134a38026GBDa",
|
|
"mainId": null,
|
|
"funName": "用电信息",
|
|
"funKey": "power",
|
|
"funDataType": "IMG",
|
|
"funComponentType": "text",
|
|
"funDataTypeName": "字符串",
|
|
"funRwType": "READWRITE",
|
|
"funRwTypeName": "可上报可下发",
|
|
"funValidType": "ENUM",
|
|
"funValidTypeName": "枚举校验",
|
|
"funValMin": null,
|
|
"funValMax": null,
|
|
"funObj": null,
|
|
"unitName": null,
|
|
"funValAcc": null,
|
|
"lastValue": '[{"name":"今日用电","value":"0.3","unit":"度"},{"name":"近一个月用电","value":"17.1","unit":"度"},{"name":"当前功率","value":"37.1","unit":"w"}]',
|
|
"dataList": null,
|
|
"lastTime": null
|
|
},
|
|
{
|
|
"tenantId": 10152,
|
|
"createId": 10343,
|
|
"createBy": "hcwl",
|
|
"icon":"icon-xitongzhuangtai",
|
|
"createTime": "2022-09-02 09:49:32",
|
|
"updateBy": "",
|
|
"updateTime": "2022-09-02 09:48:00",
|
|
"funId": 2694,
|
|
"sourceId": "adE134a38026GBDa",
|
|
"mainId": null,
|
|
"funName": "今日用电",
|
|
"funKey": "power",
|
|
"funDataType": "IMG",
|
|
"funComponentType": "text",
|
|
"funDataTypeName": "字符串",
|
|
"funRwType": "READWRITE",
|
|
"funRwTypeName": "可上报可下发",
|
|
"funValidType": "ENUM",
|
|
"funValidTypeName": "枚举校验",
|
|
"funValMin": null,
|
|
"funValMax": null,
|
|
"funObj": null,
|
|
"unitName": null,
|
|
"funValAcc": null,
|
|
"lastValue": '[{"name":"今日用电","value":"0.3","unit":"度"}]',
|
|
"dataList": null,
|
|
"lastTime": null
|
|
},
|
|
{
|
|
"tenantId": 10152,
|
|
"createId": 10343,
|
|
"createBy": "hcwl",
|
|
"icon":"icon-kaiguan2",
|
|
"createTime": "2022-09-02 09:49:32",
|
|
"updateBy": "",
|
|
"updateTime": "2022-09-02 09:48:00",
|
|
"funId": 2694,
|
|
"sourceId": "adE134a38026GBDa",
|
|
"mainId": null,
|
|
"funName": "开关",
|
|
"funKey": "power",
|
|
"funDataType": "IMG",
|
|
"funComponentType": "switch",
|
|
"funDataTypeName": "字符串",
|
|
"funRwType": "READWRITE",
|
|
"funRwTypeName": "可上报可下发",
|
|
"funValidType": "ENUM",
|
|
"funValidTypeName": "枚举校验",
|
|
"funValMin": null,
|
|
"funValMax": null,
|
|
"funObj": null,
|
|
"unitName": null,
|
|
"funValAcc": null,
|
|
"lastValue": false,
|
|
"dataList": null,
|
|
"lastTime": null
|
|
},
|
|
{
|
|
"tenantId": 10151,
|
|
"createId": 10340,
|
|
"createBy": "hcwl",
|
|
"icon":"icon-liangdu_o",
|
|
"createTime": "2022-09-02 09:50:04",
|
|
"updateBy": "",
|
|
"updateTime": "2022-09-02 09:48:00",
|
|
"funId": 2695,
|
|
"sourceId": "adE134a38026GBDa",
|
|
"mainId": null,
|
|
"funName": "亮度",
|
|
"funKey": "temperature",
|
|
"funDataType": "INT32",
|
|
"funComponentType": "slider",
|
|
"funDataTypeName": "整数型",
|
|
"funRwType": "READWRITE",
|
|
"funRwTypeName": "可上报可下发",
|
|
"funValidType": "RANGE",
|
|
"funValidTypeName": "范围校验",
|
|
"funValMin": 0,
|
|
"funValMax": 100,
|
|
"funObj": null,
|
|
"unitName": "℃",
|
|
"funValAcc": null,
|
|
"lastValue": 50,
|
|
"dataList": null,
|
|
"lastTime": null
|
|
},
|
|
{
|
|
"tenantId": 10152,
|
|
"createId": 10343,
|
|
"createBy": "hcwl",
|
|
"icon":"icon-dianji",
|
|
"createTime": "2022-09-02 09:49:32",
|
|
"updateBy": "",
|
|
"updateTime": "2022-09-02 09:48:00",
|
|
"funId": 2694,
|
|
"sourceId": "adE134a38026GBDa",
|
|
"mainId": null,
|
|
"funName": "开关",
|
|
"funKey": "power",
|
|
"funDataType": "IMG",
|
|
"funComponentType": "switch-btn",
|
|
"funDataTypeName": "字符串",
|
|
"funRwType": "READWRITE",
|
|
"funRwTypeName": "可上报可下发",
|
|
"funValidType": "ENUM",
|
|
"funValidTypeName": "枚举校验",
|
|
"funValMin": null,
|
|
"funValMax": null,
|
|
"funObj": null,
|
|
"unitName": null,
|
|
"funValAcc": null,
|
|
"lastValue": false,
|
|
"dataList": null,
|
|
"lastTime": null
|
|
},{
|
|
"tenantId": 10152,
|
|
"createId": 10343,
|
|
"createBy": "hcwl",
|
|
"icon":"icon-zhuzhuangtu_o",
|
|
"createTime": "2022-09-02 09:49:32",
|
|
"updateBy": "",
|
|
"updateTime": "2022-09-02 09:48:00",
|
|
"funId": 2694,
|
|
"sourceId": "adE134a38026GBDa",
|
|
"mainId": null,
|
|
"funName": "柱状图",
|
|
"funKey": "power",
|
|
"funDataType": "IMG",
|
|
"funComponentType": "bar",
|
|
"funDataTypeName": "字符串",
|
|
"funRwType": "READWRITE",
|
|
"funRwTypeName": "可上报可下发",
|
|
"funValidType": "ENUM",
|
|
"funValidTypeName": "枚举校验",
|
|
"funValMin": null,
|
|
"funValMax": null,
|
|
"funObj": null,
|
|
"unitName": null,
|
|
"funValAcc": null,
|
|
"lastValue": 0,
|
|
"dataList": '{"categories":["2018","2019","2020","2021","2022","2023"],"series":[{"name":"目标值","data":[35,36,31,33,13,34]},{"name":"完成量","data":[18,27,21,24,6,28]}]}',
|
|
"lastTime": null
|
|
},{
|
|
"tenantId": 10152,
|
|
"createId": 10343,
|
|
"createBy": "hcwl",
|
|
"icon":"icon-tubiao-zhexiantu",
|
|
"createTime": "2022-09-02 09:49:32",
|
|
"updateBy": "",
|
|
"updateTime": "2022-09-02 09:48:00",
|
|
"funId": 2694,
|
|
"sourceId": "adE134a38026GBDa",
|
|
"mainId": null,
|
|
"funName": "折线图",
|
|
"funKey": "power",
|
|
"funDataType": "IMG",
|
|
"funComponentType": "line",
|
|
"funDataTypeName": "字符串",
|
|
"funRwType": "READWRITE",
|
|
"funRwTypeName": "可上报可下发",
|
|
"funValidType": "ENUM",
|
|
"funValidTypeName": "枚举校验",
|
|
"funValMin": null,
|
|
"funValMax": null,
|
|
"funObj": null,
|
|
"unitName": null,
|
|
"funValAcc": null,
|
|
"lastValue": 1,
|
|
"dataList": '{"categories":["2018","2019","2020","2021","2022","2023"],"series":[{"name":"成交量A","data":[35,8,25,37,4,20]},{"name":"成交量B","data":[70,40,65,100,44,68]},{"name":"成交量C","data":[100,80,95,150,112,132]}]}',
|
|
"lastTime": null
|
|
},{
|
|
"tenantId": 10152,
|
|
"createId": 10343,
|
|
"createBy": "hcwl",
|
|
"icon":"icon-bingtu-xianxing",
|
|
"createTime": "2022-09-02 09:49:32",
|
|
"updateBy": "",
|
|
"updateTime": "2022-09-02 09:48:00",
|
|
"funId": 2694,
|
|
"sourceId": "adE134a38026GBDa",
|
|
"mainId": null,
|
|
"funName": "饼图",
|
|
"funKey": "power",
|
|
"funDataType": "IMG",
|
|
"funComponentType": "pie",
|
|
"funDataTypeName": "字符串",
|
|
"funRwType": "READWRITE",
|
|
"funRwTypeName": "可上报可下发",
|
|
"funValidType": "ENUM",
|
|
"funValidTypeName": "枚举校验",
|
|
"funValMin": null,
|
|
"funValMax": null,
|
|
"funObj": null,
|
|
"unitName": null,
|
|
"funValAcc": null,
|
|
"lastValue": 1,
|
|
"dataList": '{"series":[{"data":[{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18},{"name":"五班","value":8}]}]}',
|
|
"lastTime": null
|
|
},{
|
|
"tenantId": 10152,
|
|
"createId": 10343,
|
|
"createBy": "hcwl",
|
|
"icon":"icon-zhuzhuangtu_o",
|
|
"createTime": "2022-09-02 09:49:32",
|
|
"updateBy": "",
|
|
"updateTime": "2022-09-02 09:48:00",
|
|
"funId": 2694,
|
|
"sourceId": "adE134a38026GBDa",
|
|
"mainId": null,
|
|
"funName": "柱状图",
|
|
"funKey": "power",
|
|
"funDataType": "IMG",
|
|
"funComponentType": "bar",
|
|
"funDataTypeName": "字符串",
|
|
"funRwType": "READWRITE",
|
|
"funRwTypeName": "可上报可下发",
|
|
"funValidType": "ENUM",
|
|
"funValidTypeName": "枚举校验",
|
|
"funValMin": null,
|
|
"funValMax": null,
|
|
"funObj": null,
|
|
"unitName": null,
|
|
"funValAcc": null,
|
|
"lastValue": '',
|
|
"dataList": null,
|
|
"lastTime": null
|
|
}
|
|
]
|
|
let logList=[
|
|
{
|
|
id:1,
|
|
time:'9:27',
|
|
txt:"{\"action\":\"devSend\",\"pk\":\"adE134a38026GBDa\",\"devId\":\"1BD7H52d8a2g6BC3\",\"data\":{\"cmd\":\"up\",\"params\":{\"power\":true,\"mode\":\"制冷模式\",\"speed\":\"运行低风\",\"temperature\":25}}}"
|
|
},
|
|
{
|
|
id:2,
|
|
time:'9:28',
|
|
txt:"{\"action\":\"devSend\",\"pk\":\"adE134a38026GBDa\",\"devId\":\"1BD7H52d8a2g6BC3\",\"data\":{\"cmd\":\"up\",\"params\":{\"power\":true,\"mode\":\"制冷模式\",\"speed\":\"运行低风\",\"temperature\":25}}}"
|
|
},
|
|
{
|
|
id:3,
|
|
time:'9:29',
|
|
txt:"{\"action\":\"devSend\",\"pk\":\"adE134a38026GBDa\",\"devId\":\"1BD7H52d8a2g6BC3\",\"data\":{\"cmd\":\"up\",\"params\":{\"power\":true,\"mode\":\"制冷模式\",\"speed\":\"运行低风\",\"temperature\":25}}}"
|
|
},
|
|
{
|
|
id:4,
|
|
time:'9:30',
|
|
txt:"{\"action\":\"devSend\",\"pk\":\"adE134a38026GBDa\",\"devId\":\"1BD7H52d8a2g6BC3\",\"data\":{\"cmd\":\"up\",\"params\":{\"power\":true,\"mode\":\"制冷模式\",\"speed\":\"运行低风\",\"temperature\":25}}}"
|
|
}
|
|
]
|
|
export default{
|
|
data(){
|
|
return{
|
|
scrollTop:0,
|
|
dataList:attrList,
|
|
dataIndex: 0,
|
|
selectShow: false,
|
|
selectList: [{
|
|
value: '0',
|
|
label: '正常'
|
|
},
|
|
{
|
|
value: '1',
|
|
label: '异常'
|
|
}
|
|
],
|
|
selectDefaultValue:[0],
|
|
selectIndex: 0,
|
|
selectItemIndex: 0,
|
|
imgUploadUrl: 'http://www.example.com/upload',
|
|
imgList: [],
|
|
logList:[],
|
|
colors:{
|
|
hex: '#7ED321'
|
|
},
|
|
colorShow:false,
|
|
}
|
|
},
|
|
components: {
|
|
NumberBox,
|
|
IotsSelect,
|
|
IotsNumberBox,
|
|
IotsColorSelect,
|
|
IotsSwitch,
|
|
IotsSlider,
|
|
IotsSwitchBtn,
|
|
IotsText,
|
|
IotsBar,
|
|
IotsLine,
|
|
IotsPie,
|
|
IotsGauge,
|
|
IotsInput
|
|
},
|
|
onLoad(option) {
|
|
console.log("aaa")
|
|
if(option.name){
|
|
// 修改页面标题
|
|
uni.setNavigationBarTitle({
|
|
title: option.name
|
|
});
|
|
}
|
|
this.logList = logList;
|
|
},
|
|
watch:{
|
|
logList(){
|
|
this.scrollToBottom();
|
|
}
|
|
},
|
|
methods:{
|
|
changeIotSelect(e,index){
|
|
console.log("选择器选中",e,index);
|
|
},
|
|
changeIotNumber(e,index){
|
|
console.log("步进器选中",e,index);
|
|
},
|
|
changeIotColorSelect(e,index){
|
|
console.log("颜色选择器选中",e,index);
|
|
},
|
|
changeIotSwitch(e,index){
|
|
console.log("开关选中",e,index);
|
|
},
|
|
changeIotSwitchBtn(e,index){
|
|
console.log("开关按钮选中",e,index);
|
|
},
|
|
changeIotSlider(e,index){
|
|
console.log("滑动选中",e,index);
|
|
},
|
|
changeIotBar(e,index){
|
|
console.log("柱状图选中",e,index);
|
|
},
|
|
changeIotLine(e,index){
|
|
console.log("折线图选中",e,index);
|
|
},
|
|
changeIotPie(e,index){
|
|
console.log("饼图选中",e,index);
|
|
},
|
|
changeIotInupt(e,index){
|
|
console.log("输入框变化",e,index);
|
|
},
|
|
// 解析显示字段
|
|
getParseText(e){
|
|
let textList = [];
|
|
try {
|
|
if(e){
|
|
textList = JSON.parse(e)
|
|
return textList;
|
|
}else{
|
|
return textList;
|
|
}
|
|
} catch (error) {
|
|
// 捕获异常并处理
|
|
console.log("文字列表解析失败" + error.message);
|
|
return textList;
|
|
}
|
|
},
|
|
// 格式化select数据
|
|
formatSelect(value, index){
|
|
// 先格式化数据
|
|
let reg = /\\/g;
|
|
let str = value.funObj.replace(reg, '');;
|
|
let obj = JSON.parse(str)
|
|
let selectList = [];
|
|
for (let i in obj) {
|
|
var obj1 = {
|
|
value: i,
|
|
label: obj[i]
|
|
}
|
|
selectList.push(obj1)
|
|
}
|
|
return selectList;
|
|
},
|
|
// 颜色选择变化
|
|
inputColor(color){
|
|
console.log("当前选择颜色为",color)
|
|
},
|
|
// 样式转换
|
|
getVlaue(value) {
|
|
let reg = /\\/g;
|
|
let str = value.funObj.replace(reg, '');
|
|
let obj = JSON.parse(str)
|
|
if (value.funDataType == 'TEXT') {
|
|
return value.lastValue;
|
|
}else {
|
|
return obj[value.lastValue];
|
|
}
|
|
},
|
|
// 点击选择框
|
|
changeSelect(value, index) {
|
|
this.selectIndex = index;
|
|
// 先格式化数据
|
|
let reg = /\\/g;
|
|
let str = value.funObj.replace(reg, '');;
|
|
let obj = JSON.parse(str)
|
|
this.selectList = [];
|
|
for (let i in obj) {
|
|
var obj1 = {
|
|
value: i,
|
|
label: obj[i]
|
|
}
|
|
this.selectList.push(obj1)
|
|
}
|
|
this.selectShow = true;
|
|
// console.log("格式化之后的数据",this.selectList)
|
|
},
|
|
// 选择完成
|
|
confirm(e) {
|
|
// console.log("当前选中项",e,this.selectDefaultValue,this.groupingList[this.selectIndex].dataList[this.selectItemIndex])
|
|
if(this.dataList[this.selectIndex].funDataType=="TEXT"){
|
|
this.$nextTick(() => {
|
|
this.dataList[this.selectIndex].lastValue = e[0].label;
|
|
this.selectDefaultValue = [this.selectList.findIndex(item => item.value === e[0].value)] || [0];
|
|
})
|
|
}else{
|
|
this.$nextTick(() => {
|
|
this.dataList[this.selectIndex].lastValue = e[0].value;
|
|
this.selectDefaultValue = [this.selectList.findIndex(item => item.value === e[0].value)] || [0];
|
|
})
|
|
}
|
|
},
|
|
// 点击步进器
|
|
changeNumber(e, index) {
|
|
this.dataList[index].lastValue = e;
|
|
},
|
|
// 上传图片完成
|
|
changeUploadImg(e){
|
|
console.log("上传图片",e);
|
|
},
|
|
upLoadImg(){
|
|
this.$refs.uPloadimgRef.upload();
|
|
},
|
|
scrollToBottom(){
|
|
this.$nextTick(()=>{
|
|
uni.createSelectorQuery().in(this).select('#scroll-view-content').boundingClientRect((res)=>{
|
|
let top = res.height-200;
|
|
if(top>0){
|
|
this.scrollTop=top;
|
|
}
|
|
}).exec()
|
|
})
|
|
},
|
|
// 刷新数据日志
|
|
resetLog(){
|
|
// this.logList.push({
|
|
// id:5,
|
|
// time:'9:31',
|
|
// txt:"{\"action\":\"devSend\",\"pk\":\"adE134a38026GBDa\",\"devId\":\"1BD7H52d8a2g6BC3\",\"data\":{\"cmd\":\"up\",\"params\":{\"power\":true,\"mode\":\"制冷模式\",\"speed\":\"运行低风\",\"temperature\":25}}}"
|
|
// })
|
|
this.logList = logList;
|
|
},
|
|
// 清理日志
|
|
clearLog(){
|
|
this.logList=[]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page{
|
|
background: #f5f5f5;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.attr-list{
|
|
padding: 0 20rpx 30rpx 20rpx;
|
|
.attr-item{
|
|
padding: 20rpx 20rpx;
|
|
background: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 20rpx;
|
|
border-radius: 10rpx;
|
|
.attr-item-left{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #000;
|
|
.iconfont{
|
|
margin-right: 20rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
}
|
|
.attr-item-right{
|
|
flex: 1;
|
|
// height: 70rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
.attr-value{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
height: 70rpx;
|
|
flex: 1;
|
|
&.item-select {
|
|
padding: 0 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
color: #ccc;
|
|
.iconfont{
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
&.item-input{
|
|
// width: 250rpx;
|
|
// border: 1px solid #dcdfe6;
|
|
// border-radius: 8rpx;
|
|
// background: #fafafa;
|
|
input{
|
|
flex: 1;
|
|
height: 70rpx;
|
|
}
|
|
}
|
|
&.item-img-box{
|
|
height: 120rpx;
|
|
color: #ccc;
|
|
}
|
|
&.item-number{
|
|
flex: 0 1 auto;
|
|
width: 250rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
color: #ccc;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 8rpx;
|
|
/deep/.number-box {
|
|
.minus {
|
|
border: none;
|
|
border-right: 1px solid #dcdfe6;
|
|
}
|
|
|
|
.plus {
|
|
border: none;
|
|
border-left: 1px solid #dcdfe6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
// 数据日志
|
|
.item-log{
|
|
background: #fff;
|
|
margin-top: 20rpx;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
.item-log-header{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 20rpx;
|
|
line-height: 50rpx;
|
|
background: $mainColor;
|
|
color: #fff;
|
|
.item-log-header-right{
|
|
display: flex;
|
|
align-items: center;
|
|
.iconfont{
|
|
padding: 10rpx 15rpx;
|
|
// margin-left: 30rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
.item-log-box{
|
|
height: 200px;
|
|
padding: 10rpx;
|
|
box-sizing: border-box;
|
|
color: $mainColor;
|
|
.log-item{
|
|
padding-right: 10rpx;
|
|
word-wrap: break-word;
|
|
white-space: pre-line;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
/deep/ .u-add-btn{
|
|
display: none;
|
|
}
|
|
/deep/ .u-add-tips{
|
|
margin-top: 0 !important;
|
|
}
|
|
// 设置颜色选择器宽为100%
|
|
/deep/ .zebra-chrome{
|
|
width: 100%;
|
|
}
|
|
</style> |