503 lines
11 KiB
Vue
503 lines
11 KiB
Vue
<template>
|
|
<view id="data-list-box">
|
|
<view class="header">
|
|
<view class="header-item">
|
|
<text>设备名称</text>
|
|
<text>{{deviceName}}</text>
|
|
</view>
|
|
<view class="header-item">
|
|
<text>运行状态</text>
|
|
<text>{{deviceStateName}}</text>
|
|
</view>
|
|
</view>
|
|
<u-tabs :list="tabList" :is-scroll="false" :current="tabCurrent" :bar-width="138" :bold="false" :duration="0.1"
|
|
@change="tabChange"></u-tabs>
|
|
<!-- 自定义时间 -->
|
|
<view class="time-selcet-box" v-if="tabCurrent==3">
|
|
<view class="time-selcet">
|
|
<text @click="selectTime(0,startTime)">{{startTime?startTime:'开始时间'}}</text>
|
|
<view class="iconfont icon-shijian"></view>
|
|
<text @click="selectTime(1,endTime)">{{endTime?endTime:'结束时间'}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="menu-list">
|
|
<view class="menu-left">
|
|
<view class="menu-btn" :class="btnActive==0?'active':''" @click="changeBtn(0)">列表模式</view>
|
|
<view class="menu-btn" :class="btnActive==1?'active':''" @click="changeBtn(1)">图表模式</view>
|
|
</view>
|
|
<view class="iconfont icon-reload" @click="getDataList"></view>
|
|
</view>
|
|
|
|
<!-- 列表 -->
|
|
<view class="data-list" v-if="btnActive==0">
|
|
<view class="data-list-header">
|
|
<text>时间</text>
|
|
<text>值</text>
|
|
</view>
|
|
<view class="data-item" v-for="(item,index) in dataList" :key="index">
|
|
<text>{{$u.timeFormat(item.fg_device_ts, 'yyyy-mm-dd hh:MM:ss')}}</text>
|
|
<text>{{item[fields]}}</text>
|
|
</view>
|
|
<u-empty :show="emptyShow" text="没有找到数据" :font-size="40" :icon-size="300" :margin-top="20" mode="list"
|
|
style="background: #fff;"></u-empty>
|
|
</view>
|
|
|
|
<!-- 图表 -->
|
|
<view class="data-chart" v-else>
|
|
<qiun-data-charts
|
|
type="line"
|
|
:opts="opts"
|
|
:chartData="chartData"
|
|
:canvas2d="true"
|
|
:canvasId="canvasId"
|
|
:enableScroll="true"
|
|
:ontouch="true"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 分页 -->
|
|
<view class="list-pagination">
|
|
<uni-pagination :current="pageNum" :pageSize="pageSize" :total="total"
|
|
@change="changePagination"></uni-pagination>
|
|
</view>
|
|
|
|
<!-- 时间选择器 -->
|
|
<u-picker mode="time" v-model="timeShow" :default-time="defaultTime" :params="timeParams"
|
|
@confirm="confirmTime"></u-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
btnActive:0,
|
|
tabList: [{
|
|
name: '近一天'
|
|
}, {
|
|
name: '近一周'
|
|
}, {
|
|
name: '近一月'
|
|
}, {
|
|
name: '自定义'
|
|
}],
|
|
tabCurrent: 0,
|
|
emptyShow: false, //是否显示数据为空
|
|
dataList: [],
|
|
// 时间选择是否显示
|
|
timeShow: false,
|
|
// 时间参数
|
|
timeParams: {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: true,
|
|
minute: true,
|
|
second: true
|
|
},
|
|
defaultTime: '',
|
|
startTime: '',
|
|
endTime: '',
|
|
selectIndex: 0,
|
|
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
total: 10,
|
|
|
|
devId:null,
|
|
fields:null,
|
|
|
|
cmdId: null,
|
|
deviceKey: null,
|
|
field: null,
|
|
prodId: null,
|
|
deviceStateName: null,
|
|
|
|
// 时间范围
|
|
listWhere: [{ // 大于xx时间
|
|
field: "time",
|
|
operator: "gt",
|
|
val: 0,
|
|
valType: "time",
|
|
},
|
|
{ // 小于xx时间
|
|
field: "time",
|
|
operator: "lt",
|
|
val: 0,
|
|
valType: "time",
|
|
},
|
|
],
|
|
deviceName: null,
|
|
|
|
chartData: {},
|
|
selectValue:this.value,
|
|
charShow: true,
|
|
canvasId:this.$u.guid(32),
|
|
opts: {
|
|
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
|
enableScroll: true,
|
|
legend: {
|
|
show:false,
|
|
},
|
|
xAxis: {
|
|
disableGrid: true,
|
|
scrollShow: true,
|
|
itemCount: 6,
|
|
fontSize:10,
|
|
rotateAngle:60,
|
|
rotateLabel:true,
|
|
// boundaryGap:"justify",
|
|
},
|
|
yAxis: {
|
|
gridType: "dash",
|
|
dashLength: 1,
|
|
type:'value',
|
|
splitNumber:3,
|
|
data:[{tofix:2,min:0}]
|
|
},
|
|
extra: {
|
|
area: {
|
|
type: "straight",
|
|
width: 2,
|
|
activeType: "hollow"
|
|
}
|
|
}
|
|
},
|
|
}
|
|
},
|
|
components: {
|
|
},
|
|
onLoad(option) {
|
|
this.defaultTime = this.$u.date(new Date(), 'yyyy-mm-dd hh:MM:ss')
|
|
if (option) {
|
|
console.log("获取到的参数", option)
|
|
this.devId = option.devId;
|
|
this.fields = option.fields;
|
|
this.deviceName = option.devName;
|
|
this.deviceStateName = option.devState;
|
|
this.getDataList();
|
|
}
|
|
// this.getChartData();
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
methods: {
|
|
changeBtn(index){
|
|
this.btnActive = index;
|
|
this.getDataList();
|
|
},
|
|
// 获取数据列表
|
|
getDataList() {
|
|
this.timeFormat();
|
|
let params = {
|
|
page: this.pageNum,
|
|
pageSize: this.pageSize,
|
|
devId: this.devId,
|
|
startTs: this.listWhere[0].val,
|
|
endTs: this.listWhere[1].val,
|
|
fields: this.fields + ',fg_device_ts'
|
|
}
|
|
console.log("params", params)
|
|
this.dataList = [];
|
|
this.$api.iotsApi.getDeviceDataList(params).then(res => {
|
|
console.log("getDataList", res);
|
|
if (res.code == 0) {
|
|
if (res.data) {
|
|
this.dataList = res.data.list?res.data.list:[];
|
|
this.pageNum = res.data.page;
|
|
this.total = res.data.totalCount;
|
|
// 判断当前是否显示空
|
|
if (!this.dataList.length) {
|
|
this.emptyShow = true;
|
|
} else {
|
|
this.emptyShow = false;
|
|
}
|
|
if(this.btnActive==1){
|
|
this.getChartData(res.data.list?res.data.list:[]);
|
|
}
|
|
console.log('this.emptyShow', this.emptyShow)
|
|
} else {}
|
|
|
|
} else {
|
|
this.$u.toast(res.msg);
|
|
if (this.pageNum > 1) {
|
|
this.pageNum = 1
|
|
}
|
|
}
|
|
}, error => {
|
|
this.$u.toast('服务器开小差了呢，请您稍后再试')
|
|
if (this.pageNum > 1) {
|
|
this.pageNum = 1
|
|
}
|
|
})
|
|
},
|
|
getChartData(data) {
|
|
let resData = {
|
|
categories: [],
|
|
series: [{
|
|
name: "值",
|
|
data: []
|
|
}]
|
|
};
|
|
data.map((item,index)=>{
|
|
resData.categories.push(this.$u.timeFormat(item.fg_device_ts, 'yyyy-mm-dd hh:MM:ss'));
|
|
resData.series[0].data.push(item[this.fields]);
|
|
})
|
|
console.log("resData",resData)
|
|
this.chartData = JSON.parse(JSON.stringify(resData));
|
|
},
|
|
// 时间格式化
|
|
timeFormat() {
|
|
// 开始和结束时间
|
|
let date = new Date();
|
|
switch (this.tabCurrent) {
|
|
case 0:
|
|
this.listWhere[0].val = date.getTime() - 24 * 60 * 60 * 1000;
|
|
this.listWhere[1].val = date.getTime();
|
|
break;
|
|
case 1:
|
|
this.listWhere[0].val = date.getTime() - 24 * 7 * 60 * 60 * 1000;
|
|
this.listWhere[1].val = date.getTime();
|
|
break;
|
|
case 2:
|
|
this.listWhere[0].val = date.getTime() - 24 * 30 * 60 * 60 * 1000;
|
|
this.listWhere[1].val = date.getTime();
|
|
break;
|
|
default:
|
|
this.listWhere[0].val = 0
|
|
this.listWhere[1].val = 0
|
|
if (this.startTime) {
|
|
console.log("this.startTime", this.startTime)
|
|
let time1 = new Date(this.startTime);
|
|
this.listWhere[0].val = time1.getTime();
|
|
if (this.endTime) {
|
|
let time2 = new Date(this.endTime);
|
|
console.log("this.endTime", this.endTime)
|
|
this.listWhere[1].val = time2.getTime();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
tabChange(index) {
|
|
this.tabCurrent = index;
|
|
this.pageNum = 1;
|
|
this.total = 10;
|
|
this.dataList = [];
|
|
this.getDataList();
|
|
},
|
|
// 点击页面
|
|
changePagination(e) {
|
|
console.log("点击页面", e);
|
|
this.pageNum = e.current;
|
|
this.getDataList()
|
|
},
|
|
// 点击选择时间
|
|
selectTime(index, defaultTime) {
|
|
this.selectIndex = index;
|
|
this.timeShow = true;
|
|
if (defaultTime) {
|
|
this.defaultTime = defaultTime;
|
|
}
|
|
},
|
|
// 点击确认选择时间
|
|
confirmTime(obj) {
|
|
console.log(obj)
|
|
let time = obj.year + '-' + obj.month + '-' + obj.day + ' ' + obj.hour + ':' + obj.minute + ':' + obj
|
|
.second;
|
|
if (this.selectIndex == 0) {
|
|
this.startTime = time;
|
|
} else {
|
|
this.endTime = time;
|
|
}
|
|
if (this.startTime && this.endTime) {
|
|
this.getDataList();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
page,.data-list-box{
|
|
background-color: #e9ecf3;
|
|
}
|
|
</style>
|
|
<style scoped lang="scss">
|
|
|
|
.header {
|
|
padding: 10rpx 24rpx 0;
|
|
background: #fff;
|
|
margin-bottom: 20rpx;
|
|
|
|
.header-item {
|
|
height: 98rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 23rpx 0 17rpx;
|
|
font-size: 28rpx;
|
|
color: #444444;
|
|
line-height: 55px;
|
|
|
|
&:first-of-type {
|
|
border-bottom: 1px solid #E8EBF2;
|
|
}
|
|
|
|
text {
|
|
&:first-of-type {
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 时间选择器
|
|
.time-selcet-box {
|
|
padding: 18rpx 24rpx 0;
|
|
|
|
.time-selcet {
|
|
width: 702rpx;
|
|
height: 84rpx;
|
|
background: #FFFFFF;
|
|
// box-shadow: 0px 6rpx 29rpx 0px rgba(174, 185, 190, 0.7);
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
|
|
text {
|
|
font-size: 26rpx;
|
|
color: #B4B4B4;
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.iconfont {
|
|
font-size: 34rpx;
|
|
color: #444;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-list{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
padding-bottom: 0;
|
|
.menu-left{
|
|
display: flex;
|
|
align-items: center;
|
|
.menu-btn{
|
|
border: 1px solid #009CFF;
|
|
color: #009CFF;
|
|
border-radius: 10rpx;
|
|
background-color: #fff;
|
|
// height: 100rpx;
|
|
padding: 10rpx 20rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
&.active{
|
|
color: #fff;
|
|
background: #009CFF;
|
|
}
|
|
&:first-child{
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.iconfont{
|
|
font-size: 40rpx;
|
|
color: #009CFF;
|
|
font-weight: bold;
|
|
padding: 10rpx;
|
|
}
|
|
}
|
|
|
|
.data-list {
|
|
padding: 20rpx 20rpx 0;
|
|
|
|
.data-list-header {
|
|
height: 80rpx;
|
|
background: #FFFFFF;
|
|
// box-shadow: 0px 6rpx 18rpx 0px rgba(174, 185, 190, 0.7);
|
|
border-bottom: 1px solid #f5f5f5;
|
|
border-radius: 10rpx 10rpx 0 0;
|
|
z-index: 10;
|
|
position: relative;
|
|
display: flex;
|
|
|
|
text {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
color: #444444;
|
|
}
|
|
}
|
|
|
|
.data-item {
|
|
background: #FFFFFF;
|
|
height: 80rpx;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
display: flex;
|
|
|
|
&:last-of-type {
|
|
border: none;
|
|
}
|
|
|
|
text {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
font-size: 24rpx;
|
|
color: #444444;
|
|
}
|
|
}
|
|
}
|
|
.data-chart{
|
|
margin: 20rpx 20rpx 0;
|
|
padding-bottom: 5rpx;
|
|
height: 800rpx;
|
|
background: #fff;
|
|
}
|
|
|
|
.list-pagination {
|
|
// width: 100%;
|
|
margin: 0 20rpx;
|
|
background: #FFFFFF;
|
|
border-top: 1px solid #f5f5f5;
|
|
border-radius: 0 0 10rpx 10rpx;
|
|
padding: 20rpx 40rpx;
|
|
|
|
/deep/ .uni-pagination__btn.uni-pagination__btn {
|
|
width: 140rpx;
|
|
height: 60rpx;
|
|
background: #FFFFFF;
|
|
border: 1px solid #DCDCDC;
|
|
border-radius: 5rpx;
|
|
font-size: 24rpx;
|
|
line-height: 60rpx;
|
|
|
|
text {
|
|
color: #727272;
|
|
}
|
|
}
|
|
|
|
/deep/ .uni-pagination--enabled.uni-pagination--enabled {
|
|
border: 1px solid #009CFF;
|
|
|
|
text {
|
|
color: #009CFF;
|
|
}
|
|
}
|
|
}
|
|
</style>
|