352 lines
9.8 KiB
Vue
352 lines
9.8 KiB
Vue
<template>
|
|
<view class="historyCurve">
|
|
<view class="historyCurve-header">
|
|
<view class="historyCurve-header-date" @click="beginDatePickerShow = true">
|
|
<text class="pr15">{{currentSelectorValue.deviceName}}</text>
|
|
<u-icon name="arrow-down-fill" color="#999999" size="18"></u-icon>
|
|
</view>
|
|
<view class="historyCurve-header-date" @click="endDatePickerShow = true">
|
|
<text class="pr15">{{endDate}}</text>
|
|
<u-icon name="arrow-down-fill" color="#999999" size="18"></u-icon>
|
|
</view>
|
|
</view>
|
|
<u-tabs
|
|
:list="list"
|
|
:current="current"
|
|
:is-scroll="false"
|
|
:font-size="28"
|
|
:active-color="'#1C9AFF'"
|
|
:bold="false"
|
|
item-width="25%"
|
|
@change="change"
|
|
>
|
|
</u-tabs>
|
|
<!-- 加载中 -->
|
|
<template v-if="loadStatus ==='loading'">
|
|
<view class="historyCurve-nodata">
|
|
<u-loading mode="flower" :size="60"></u-loading>
|
|
</view>
|
|
</template>
|
|
<!-- 已加载 -->
|
|
<template v-else-if="loadStatus == 'loaded'">
|
|
<!-- 电压 -->
|
|
<template v-if="current===0">
|
|
<voltage :chartData="uColumnData"></voltage>
|
|
</template>
|
|
<!-- 电流 -->
|
|
<template v-else-if="current===1">
|
|
<electric :chartData="iColumnData"></electric>
|
|
</template>
|
|
<!-- 漏电 -->
|
|
<template v-else-if="current===2">
|
|
<leakage :chartData="inColumnData"></leakage>
|
|
</template>
|
|
<!-- 温度-->
|
|
<!-- <template v-else-if="current===3">
|
|
<temperature :lineRoad1Data="lineRoad1ColumnData"></temperature>
|
|
</template> -->
|
|
<template v-else-if="current===3">
|
|
<temperature :lineRoad1Data="lineRoad1ColumnData" :lineRoad2Data="lineRoad2ColumnData" :lineRoad3Data="lineRoad3ColumnData" :lineRoad4Data="lineRoad4ColumnData"></temperature>
|
|
</template>
|
|
</template>
|
|
<!-- 无数据状态 -->
|
|
<template v-else-if="loadStatus == 'none'">
|
|
<view class="historyCurve-nodata">
|
|
<u-empty text="数据为空~" mode="list"></u-empty>
|
|
</view>
|
|
</template>
|
|
<!-- 加载错误 -->
|
|
<template v-else>
|
|
<view class="historyCurve-nodata">
|
|
<u-empty text="网络开小差啦~" mode="data"></u-empty>
|
|
</view>
|
|
</template>
|
|
|
|
<u-picker mode="selector" :range="selectorData" range-key="deviceName" v-model="beginDatePickerShow" @confirm="selectorOnConfirmFn"></u-picker>
|
|
<u-picker mode="time" :params="params" v-model="endDatePickerShow" @confirm="endDateConfirmFn"></u-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import voltage from './components/voltage.vue'
|
|
import electric from './components/electric.vue'
|
|
import leakage from './components/leakage.vue'
|
|
import temperature from './components/temperature.vue'
|
|
|
|
let _self;
|
|
export default {
|
|
data() {
|
|
return {
|
|
deviceId:"",
|
|
prodKey:"",
|
|
deviceName:"",
|
|
appInfo:{},
|
|
|
|
beginDatePickerShow:false,
|
|
endDatePickerShow:false,
|
|
currentSelectorValue:{},
|
|
selectorData:[],
|
|
beginDate:"",
|
|
endDate:"",
|
|
params:{
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
timestamp: true, // 1.3.7版本提供
|
|
},
|
|
list: [
|
|
{
|
|
name: '电压'
|
|
},{
|
|
name: '电流'
|
|
},{
|
|
name: '漏电'
|
|
},{
|
|
name: '温度'
|
|
}
|
|
],
|
|
current: 0,
|
|
// historyCurveData: {}, // 历史曲线数据
|
|
uColumnData: {},// 电压数据
|
|
inColumnData: {},// 漏电流数据
|
|
iColumnData: {}, // 电流数据
|
|
lineRoad1ColumnData: {}, // 线路1温度
|
|
lineRoad2ColumnData:{}, // 线路2温度
|
|
lineRoad3ColumnData: {}, // 线路3温度
|
|
lineRoad4ColumnData: {}, // 线路4温度
|
|
loadStatus: 'loading'
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
_self = this;
|
|
// this.beginDate = this.$u.timeFormat(new Date(), 'yyyy-mm-dd');
|
|
this.endDate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
|
|
|
|
this.deviceId = e.deviceId;
|
|
this.prodKey = e.prodKey;
|
|
this.deviceKey = e.deviceKey;
|
|
this.deviceName = e.deviceName;
|
|
},
|
|
onReady() {
|
|
this.getDeviceInfoListFn();
|
|
},
|
|
methods: {
|
|
change(index) {
|
|
this.current = index;
|
|
},
|
|
iniData() {
|
|
this.uColumnData = {};
|
|
this.inColumnData = {};
|
|
this.iColumnData = {};
|
|
this.lineRoad1ColumnData = {};
|
|
this.lineRoad2ColumnData = {};
|
|
this.lineRoad3ColumnData = {};
|
|
this.lineRoad4ColumnData = {};
|
|
},
|
|
getDeviceInfoListFn(){
|
|
this.$get(`/app/device/children/${this.deviceId}`).then((res)=>{
|
|
// console.log(res,"Res");
|
|
if(res.data.length>0){
|
|
// console.log(res,"Res");
|
|
this.selectorData = res.data;
|
|
this.currentSelectorValue = this.selectorData[0];
|
|
this.getServerData();
|
|
}else{
|
|
_self.loadStatus = 'none';
|
|
_self.currentSelectorValue = {deviceName:_self.deviceName};
|
|
}
|
|
}).catch(()=>{
|
|
_self.loadStatus = 'error';
|
|
this.selectorData = [];
|
|
})
|
|
},
|
|
// 获取数据
|
|
getServerData(){
|
|
// console.log(_self.currentSelectorValue, '_self.currentSelectorValue')
|
|
let isIos = false;
|
|
try{
|
|
const res = uni.getSystemInfoSync();
|
|
if(res.system.indexOf("iOS") != -1){
|
|
isIos = true;
|
|
}
|
|
// console.log(isIos,"isIos")
|
|
}catch(e){
|
|
//TODO handle the exception
|
|
}
|
|
// 解决ios端转换时间戳时间格式
|
|
if(isIos){
|
|
this.endDate = this.endDate.replace(/-/g,'/');
|
|
}
|
|
let timestampStr = new Date(this.endDate + " 00:00:00"),
|
|
currentDayTimestamp = timestampStr.getTime(),
|
|
lastDayTimeStamp = (currentDayTimestamp + (24*60*60*1000));
|
|
let startTime = this.$utils.getYMDHMS(currentDayTimestamp);
|
|
let endTime = this.$utils.getYMDHMS(lastDayTimeStamp);
|
|
|
|
console.log(startTime, endTime)
|
|
this.$get('/iot/dev/data/mcb/top',{deviceId: _self.currentSelectorValue.deviceId, startDate: startTime, endDate: endTime})
|
|
.then(res => {
|
|
// console.log(res, '/mcb/top')
|
|
if(res.code !=200 || res.data == 0) {
|
|
console.log("11")
|
|
_self.leakageChartA = true; // 漏电渲染开关
|
|
_self.loadStatus = 'none';
|
|
_self.iniData();
|
|
// _self.$tui.toast("无数据",2000)
|
|
return;
|
|
}else if(res.data.length<=0){
|
|
console.log("22")
|
|
_self.leakageChartA = true; // 漏电渲染开关
|
|
_self.loadStatus = 'none';
|
|
return;
|
|
}
|
|
console.log("33")
|
|
let timeArrList = [],
|
|
uList = [],
|
|
iList = [],
|
|
inList = [],
|
|
lineRoadOneT1List = [],
|
|
lineRoadOneT2List = [],
|
|
lineRoadTwoT3List = [],
|
|
lineRoadTwoT4List = [],
|
|
lineRoadThreeT5List = [],
|
|
lineRoadThreeT6List = [],
|
|
lineRoadFourT7List = [],
|
|
lineRoadFourT8List = [];
|
|
|
|
res.data.forEach((item,index)=>{
|
|
// timeArrList.push(_self.$u.timeFormat(item.createTime, 'hh:MM:ss') || "-");
|
|
// 解决ios时间格式问题
|
|
if(isIos){
|
|
let createTime = item.createTime.replace(/-/g,'/');
|
|
timeArrList.push(_self.$u.timeFormat(new Date(createTime).getTime(), 'hh:MM:ss') || "-");
|
|
}else{
|
|
timeArrList.push(_self.$u.timeFormat(new Date(item.createTime).getTime(), 'hh:MM:ss') || "-");
|
|
}
|
|
|
|
uList.push(item.u || 0);
|
|
iList.push(item.i || 0);
|
|
inList.push(item.in || 0)
|
|
lineRoadOneT1List.push(item.t1 || 0);
|
|
lineRoadOneT2List.push(item.t2 || 0);
|
|
lineRoadTwoT3List.push(item.t3 || 0);
|
|
lineRoadTwoT4List.push(item.t4 || 0);
|
|
lineRoadThreeT5List.push(item.t5 || 0);
|
|
lineRoadThreeT6List.push(item.t6 || 0);
|
|
lineRoadFourT7List.push(item.t7 || 0);
|
|
lineRoadFourT8List.push(item.t8 || 0);
|
|
})
|
|
// console.log(timeArrList, 'timeArrList')
|
|
_self.inColumnData = {
|
|
series:[{name:"漏电流(mA)",data:inList}],
|
|
categories:timeArrList
|
|
}
|
|
|
|
_self.uColumnData = {
|
|
series:[{name:"电压(V)",data:uList}],
|
|
categories:timeArrList
|
|
}
|
|
|
|
// console.log(_self.uColumnData, 'uColumnData')
|
|
_self.iColumnData = {
|
|
series:[{name:"电流(A)",data:iList}],
|
|
categories:timeArrList
|
|
}
|
|
_self.lineRoad1ColumnData = {
|
|
series:[
|
|
{name:"进线路1温度(°C)",data:lineRoadOneT1List},
|
|
{name:"出线路1温度(°C)",data:lineRoadOneT2List},
|
|
],
|
|
categories:timeArrList
|
|
}
|
|
_self.lineRoad2ColumnData = {
|
|
series:[
|
|
{name:"进线路2温度(°C)",data:lineRoadTwoT3List},
|
|
{name:"出线路2温度(°C)",data:lineRoadTwoT4List},
|
|
],
|
|
categories:timeArrList
|
|
}
|
|
_self.lineRoad3ColumnData = {
|
|
series:[
|
|
{name:"进线路3温度(°C)",data:lineRoadThreeT5List},
|
|
{name:"出线路3温度(°C)",data:lineRoadThreeT6List},
|
|
],
|
|
categories:timeArrList
|
|
}
|
|
_self.lineRoad4ColumnData = {
|
|
series:[
|
|
{name:"进线路4温度(°C)",data:lineRoadFourT7List},
|
|
{name:"出线路4温度(°C)",data:lineRoadFourT8List},
|
|
],
|
|
categories:timeArrList
|
|
}
|
|
_self.leakageChartA = true; // 漏电渲染开关
|
|
_self.loadStatus = 'loaded';
|
|
|
|
}).catch((err) => {
|
|
console.log("finally",err)
|
|
_self.leakageChartA = true; // 漏电渲染开关
|
|
_self.loadStatus = 'loaded';
|
|
|
|
})
|
|
|
|
},
|
|
selectorOnConfirmFn(e){
|
|
this.currentSelectorValue = this.selectorData[e];
|
|
this.getServerData();
|
|
},
|
|
endDateConfirmFn(e){
|
|
// console.log(e,"eeeeeeeeee");
|
|
this.endDate = `${e.year}-${e.month}-${e.day}`;
|
|
// console.log(this.endDate,"this.endDate");
|
|
// let timestampStr = new Date(this.endDate);
|
|
// console.log(timestampStr,"timestampStr");
|
|
this.getServerData();
|
|
|
|
}
|
|
},
|
|
components: {
|
|
voltage,
|
|
electric,
|
|
leakage,
|
|
temperature
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.historyCurve{
|
|
width: 100%;
|
|
/* background-color: #F9F9F9; */
|
|
:not(not) {
|
|
box-sizing: border-box;
|
|
}
|
|
&-header{
|
|
/* position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 100; */
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #eee;
|
|
background-color: #fff;
|
|
&-date{
|
|
width: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20rpx 0;
|
|
}
|
|
}
|
|
&-nodata{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 600rpx;
|
|
height: 550rpx;
|
|
}
|
|
}
|
|
</style>
|