407 lines
11 KiB
Vue
407 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<view class="statistic-wrap">
|
|||
|
|
<view class="statistic-title">
|
|||
|
|
<view class="slave-wrap" v-if="isSubDev">
|
|||
|
|
<uni-data-select :placeholder="$tt('deviceStatic.selectSub')" v-model="queryParams.slaveId"
|
|||
|
|
:localdata="slaveList" @change="handleSlavechange" :clear="false"></uni-data-select>
|
|||
|
|
</view>
|
|||
|
|
<view class="time-wrap" @click="openCalendar">
|
|||
|
|
<!-- #ifndef APP-NVUE -->
|
|||
|
|
<u-input v-model="dateRangeText" :placeholder="$tt('deviceStatic.rangeTime')" prefixIcon="search"
|
|||
|
|
prefixIconStyle="color: #909399" readonly :disabled="statisticList.length === 0"
|
|||
|
|
customStyle="height:20px;">
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifdef APP-NVUE -->
|
|||
|
|
<u--input v-model="dateRangeText" :placeholder="$tt('deviceStatic.rangeTime')" prefixIcon="search"
|
|||
|
|
prefixIconStyle="color: #909399" readonly :disabled="statisticList.length === 0"
|
|||
|
|
customStyle="height:20px;">
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<template slot="suffix">
|
|||
|
|
<u-button :text="$tt('deviceStatic.search')" type="primary" size="mini"
|
|||
|
|
@click="handleSearchTap()"></u-button>
|
|||
|
|
</template>
|
|||
|
|
<!-- #ifndef APP-NVUE -->
|
|||
|
|
</u-input>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifdef APP-NVUE -->
|
|||
|
|
</u--input>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<u-calendar :title="$tt('deviceStatic.selectTime')" :show="isShowCalendar" monthNum="12"
|
|||
|
|
:minDate="getDate(-12)" mode="range" :defaultDate="defaultDateRange"
|
|||
|
|
@confirm="handleCalendarConfirm" @close="handleCalendarClose"></u-calendar>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="statisticList.length !== 0" class="charts-box" v-for="(chart, index) in monitorChart" :key="index">
|
|||
|
|
<qiun-data-charts type="area" :canvas2d="true" :opts="chart.opts" :chartData="chart.data" :ontouch="true"
|
|||
|
|
:onzoom="true" tooltipFormat="tooltipStatistic" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<u-empty mode="data" :show="statisticList.length === 0" marginTop="30"></u-empty>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
getDeviceHistory
|
|||
|
|
} from '@/apis/modules/deviceLog.js';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'device-statistics',
|
|||
|
|
props: {
|
|||
|
|
device: {
|
|||
|
|
type: Object,
|
|||
|
|
default: null,
|
|||
|
|
require: true,
|
|||
|
|
},
|
|||
|
|
type: Number
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
device: function (newVal, oldVal) {
|
|||
|
|
this.deviceInfo = newVal;
|
|||
|
|
this.isSubDev = newVal.subDeviceList && newVal.subDeviceList.length > 0;
|
|||
|
|
if (newVal.deviceType === 1) {
|
|||
|
|
this.slaveList = this.getSlaveDatas(newVal.subDeviceList);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 监测数据
|
|||
|
|
if (this.isSubDev) {
|
|||
|
|
const slaveId = this.slaveList[0] && this.slaveList[0].value;
|
|||
|
|
this.queryParams.slaveId = slaveId;
|
|||
|
|
this.preSlaveId = slaveId;
|
|||
|
|
this.queryParams.serialNumber = newVal.subDeviceList[0].serialNumber;
|
|||
|
|
this.statisticList = newVal.cacheThingsModel["properties"] && newVal.cacheThingsModel["properties"]
|
|||
|
|
.filter(item => {
|
|||
|
|
return item.tempSlaveId == this.queryParams.slaveId;
|
|||
|
|
}) || [];
|
|||
|
|
} else {
|
|||
|
|
this.queryParams.serialNumber = newVal.serialNumber;
|
|||
|
|
this.statisticList = newVal.statisticList || [];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
type (val) {
|
|||
|
|
if (val === 3) {
|
|||
|
|
this.getData();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
dateRangeText: {
|
|||
|
|
get() {
|
|||
|
|
if (this.queryParams.beginTime && this.queryParams.beginTime != '') {
|
|||
|
|
return this.queryParams.beginTime + ' - ' + this.queryParams.endTime;
|
|||
|
|
}
|
|||
|
|
return '';
|
|||
|
|
},
|
|||
|
|
set(val) {}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data () {
|
|||
|
|
const beginTime = uni.$u.timeFormat((new Date().getTime() - 3600 * 1000 * 24), 'yyyy-mm-dd');
|
|||
|
|
const endTime = uni.$u.timeFormat(new Date(), 'yyyy-mm-dd');
|
|||
|
|
return {
|
|||
|
|
// 图表数据集合
|
|||
|
|
monitorChart: [{
|
|||
|
|
name: ''
|
|||
|
|
}],
|
|||
|
|
// 查询参数
|
|||
|
|
queryParams: {
|
|||
|
|
serialNumber: '',
|
|||
|
|
slaveId: '',
|
|||
|
|
beginTime: beginTime,
|
|||
|
|
endTime: endTime
|
|||
|
|
},
|
|||
|
|
defaultDateRange: [beginTime, endTime],
|
|||
|
|
// 子设备
|
|||
|
|
isSubDev: false,
|
|||
|
|
slaveList: [],
|
|||
|
|
preSlaveId: '',
|
|||
|
|
// 时间范围组件显示
|
|||
|
|
isShowCalendar: false,
|
|||
|
|
// 监控物模型
|
|||
|
|
statisticList: [],
|
|||
|
|
// 设备信息
|
|||
|
|
deviceInfo: {},
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 打开日期范围组件
|
|||
|
|
openCalendar () {
|
|||
|
|
if (this.monitorChart.length > 0) {
|
|||
|
|
this.isShowCalendar = true;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 关闭日期范围组件
|
|||
|
|
handleCalendarClose () {
|
|||
|
|
this.isShowCalendar = false;
|
|||
|
|
},
|
|||
|
|
// 确定选择日期范围
|
|||
|
|
handleCalendarConfirm (data) {
|
|||
|
|
if (null != data[0] && '' != data[0]) {
|
|||
|
|
this.queryParams.beginTime = data[0];
|
|||
|
|
this.queryParams.endTime = data[data.length - 1];
|
|||
|
|
}
|
|||
|
|
this.isShowCalendar = false;
|
|||
|
|
},
|
|||
|
|
// 查询
|
|||
|
|
handleSearchTap () {
|
|||
|
|
// chart 组件问题,需要自己控制是清除还是重新初始化图表
|
|||
|
|
if (this.preSlaveId === this.queryParams.slaveId) {
|
|||
|
|
this.clearChart();
|
|||
|
|
} else {
|
|||
|
|
this.initChart();
|
|||
|
|
}
|
|||
|
|
this.getHistory();
|
|||
|
|
event.stopPropagation();
|
|||
|
|
},
|
|||
|
|
// 清除
|
|||
|
|
handleClearTap () {
|
|||
|
|
this.queryParams.beginTime = null;
|
|||
|
|
this.queryParams.endTime = null;
|
|||
|
|
if (this.isSubDev) {
|
|||
|
|
this.handleSlavechange(this.slaveList[0].value)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 获取当前日期
|
|||
|
|
getDate (month) {
|
|||
|
|
let date = new Date();
|
|||
|
|
let y = date.getFullYear();
|
|||
|
|
let m = date.getMonth() + 1 + month;
|
|||
|
|
let d = date.getDate();
|
|||
|
|
m = m < 10 ? '0' + m : m;
|
|||
|
|
d = d < 10 ? '0' + d : d;
|
|||
|
|
return y + '-' + m + '-' + d;
|
|||
|
|
},
|
|||
|
|
// 获取统计数据
|
|||
|
|
getData () {
|
|||
|
|
this.initChart(); // 初始化图表
|
|||
|
|
this.getHistory(); // 获取统计数据
|
|||
|
|
uni.stopPullDownRefresh();
|
|||
|
|
},
|
|||
|
|
// 获取统计数据
|
|||
|
|
getHistory () {
|
|||
|
|
const {
|
|||
|
|
beginTime,
|
|||
|
|
endTime,
|
|||
|
|
...pres
|
|||
|
|
} = this.queryParams;
|
|||
|
|
const params = {
|
|||
|
|
...pres,
|
|||
|
|
beginTime: beginTime + ' 23:59',
|
|||
|
|
endTime: endTime + ' 23:59'
|
|||
|
|
};
|
|||
|
|
getDeviceHistory(params).then(res => {
|
|||
|
|
for (let i = 0; i < this.statisticList.length; i++) {
|
|||
|
|
let obj = {
|
|||
|
|
categories: [],
|
|||
|
|
series: [{
|
|||
|
|
name: this.statisticList[i].name + '（单位 ' + (this
|
|||
|
|
.statisticList[i]
|
|||
|
|
.datatype.unit != undefined ? this.statisticList[i]
|
|||
|
|
.datatype.unit : '无') + '）',
|
|||
|
|
data: []
|
|||
|
|
}],
|
|||
|
|
};
|
|||
|
|
for (let key in res.data) {
|
|||
|
|
if (key === this.statisticList[i].id) {
|
|||
|
|
for (let j = 0; j < res.data[key].length; j++) {
|
|||
|
|
obj.categories.push(res.data[key][j].time);
|
|||
|
|
obj.series[0].data.push(Number(res.data[key][j].value));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
let data = JSON.parse(JSON.stringify(obj));
|
|||
|
|
this.monitorChart[i].data = data;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 数据请求成功后更新preSlaveId
|
|||
|
|
this.preSlaveId = this.queryParams.slaveId;
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 初始化图表
|
|||
|
|
initChart () {
|
|||
|
|
let color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4',
|
|||
|
|
'#ea7ccc'
|
|||
|
|
];
|
|||
|
|
this.monitorChart = [];
|
|||
|
|
for (let i = 0; i < this.statisticList.length; i++) {
|
|||
|
|
// data里面设置值是因为如果不加这个设置了最大最小值，第一次加载数据Y轴最大最小无法生效
|
|||
|
|
let data = {
|
|||
|
|
categories: [],
|
|||
|
|
series: [{
|
|||
|
|
name: '',
|
|||
|
|
data: []
|
|||
|
|
}],
|
|||
|
|
};
|
|||
|
|
let opts = {
|
|||
|
|
// 自定义名称和单位，用于图表提示框显示
|
|||
|
|
name: this.statisticList[i].name,
|
|||
|
|
unit: this.statisticList[i].datatype.unit,
|
|||
|
|
timing: 'easeOut',
|
|||
|
|
color: [color[i % color.length]],
|
|||
|
|
padding: [15, 15, 0, 15],
|
|||
|
|
fontSize: 12,
|
|||
|
|
fontColor: '#666666',
|
|||
|
|
dataLabel: false, //是否显示值
|
|||
|
|
dataPointShape: true,
|
|||
|
|
dataPointShapeType: 'solid',
|
|||
|
|
touchMoveLimit: 60,
|
|||
|
|
enableScroll: true,
|
|||
|
|
enableMarkLine: false,
|
|||
|
|
update: true,
|
|||
|
|
legend: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'bottom',
|
|||
|
|
float: 'center',
|
|||
|
|
padding: 5,
|
|||
|
|
margin: 5,
|
|||
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
|||
|
|
borderColor: 'rgba(0,0,0,0)',
|
|||
|
|
borderWidth: 0,
|
|||
|
|
fontSize: 14,
|
|||
|
|
fontColor: '#333333',
|
|||
|
|
lineHeight: 16,
|
|||
|
|
hiddenColor: '#CECECE',
|
|||
|
|
itemGap: 10
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
disableGrid: true,
|
|||
|
|
disabled: true, // 隐藏分类名称
|
|||
|
|
axisLine: true,
|
|||
|
|
axisLineColor: '#CCCCCC',
|
|||
|
|
calibration: false,
|
|||
|
|
fontColor: '#666666',
|
|||
|
|
fontSize: 13,
|
|||
|
|
rotateLabel: false,
|
|||
|
|
rotateAngle: 45,
|
|||
|
|
itemCount: 100,
|
|||
|
|
boundaryGap: 'justify',
|
|||
|
|
splitNumber: 5,
|
|||
|
|
gridColor: '#CCCCCC',
|
|||
|
|
gridType: 'solid',
|
|||
|
|
dashLength: 1,
|
|||
|
|
gridEval: 1,
|
|||
|
|
scrollShow: false,
|
|||
|
|
scrollAlign: 'right',
|
|||
|
|
scrollColor: '#A6A6A6',
|
|||
|
|
scrollBackgroundColor: '#ccc',
|
|||
|
|
format: ''
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
gridType: 'dash',
|
|||
|
|
dashLength: 2,
|
|||
|
|
disabled: false,
|
|||
|
|
tofix: 3, // 刻度保留小数位数
|
|||
|
|
disableGrid: false,
|
|||
|
|
splitNumber: 5,
|
|||
|
|
gridColor: '#CCCCCC',
|
|||
|
|
padding: 10,
|
|||
|
|
showTitle: false,
|
|||
|
|
max: this.statisticList[i].datatype.max,
|
|||
|
|
min: this.statisticList[i].datatype.min,
|
|||
|
|
data: [],
|
|||
|
|
},
|
|||
|
|
extra: {
|
|||
|
|
area: {
|
|||
|
|
type: 'curve',
|
|||
|
|
opacity: 0.5,
|
|||
|
|
addLine: true,
|
|||
|
|
width: 1,
|
|||
|
|
gradient: false
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
showBox: true,
|
|||
|
|
showArrow: true,
|
|||
|
|
showCategory: true,
|
|||
|
|
borderWidth: 0,
|
|||
|
|
borderRadius: 0,
|
|||
|
|
borderColor: '#000000',
|
|||
|
|
borderOpacity: 0.7,
|
|||
|
|
bgColor: '#000000',
|
|||
|
|
bgOpacity: 0.7,
|
|||
|
|
gridType: 'solid',
|
|||
|
|
dashLength: 4,
|
|||
|
|
gridColor: '#CCCCCC',
|
|||
|
|
fontColor: '#FFFFFF',
|
|||
|
|
splitLine: true,
|
|||
|
|
horizentalLine: false,
|
|||
|
|
xAxisLabel: false,
|
|||
|
|
yAxisLabel: false,
|
|||
|
|
labelBgColor: '#FFFFFF',
|
|||
|
|
labelBgOpacity: 0.7,
|
|||
|
|
labelFontColor: '#666666'
|
|||
|
|
},
|
|||
|
|
markLine: {
|
|||
|
|
type: 'solid',
|
|||
|
|
dashLength: 2,
|
|||
|
|
data: []
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.monitorChart.push({
|
|||
|
|
opts: opts,
|
|||
|
|
data: data,
|
|||
|
|
show: false,
|
|||
|
|
id: this.statisticList[i].id
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 清空图标
|
|||
|
|
clearChart () {
|
|||
|
|
for (let i = 0; i < this.monitorChart.length; i++) {
|
|||
|
|
this.monitorChart[i].data.series[0].data = [];
|
|||
|
|
this.monitorChart[i].data.categories = [];
|
|||
|
|
this.monitorChart[i].show = true;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 获取子设备列表数据
|
|||
|
|
getSlaveDatas (data) {
|
|||
|
|
if (data != undefined) {
|
|||
|
|
return data.map(item => ({
|
|||
|
|
value: item.slaveId,
|
|||
|
|
text: `${item.deviceName}（从机地址：${item.slaveId}）`
|
|||
|
|
}));
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 从机选择
|
|||
|
|
handleSlavechange (value) {
|
|||
|
|
this.statisticList = this.deviceInfo.cacheThingsModel["properties"].filter(item => {
|
|||
|
|
return item.tempSlaveId === value;
|
|||
|
|
});
|
|||
|
|
this.queryParams.slaveId = value;
|
|||
|
|
this.queryParams.serialNumber = this.deviceInfo.subDeviceList.find(item => item.slaveId === value)
|
|||
|
|
.serialNumber;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.statistic-wrap {
|
|||
|
|
|
|||
|
|
.statistic-title {
|
|||
|
|
padding: 0px 10px 10px 10px;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
|
|||
|
|
.slave-wrap {
|
|||
|
|
padding-top: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-wrap {
|
|||
|
|
padding-top: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-wrap {
|
|||
|
|
padding-top: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
|
|||
|
|
.charts-box {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 230px;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
padding: 10px 0;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|