You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
4.8 KiB
117 lines
4.8 KiB
<template>
|
|
<views-shared-layout>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="form-horizontal query">
|
|
<div class="row">
|
|
<div class="col-sm-3">
|
|
<div class="form-group row">
|
|
<label class="col-sm-3 col-form-label">开始:</label>
|
|
<div class="col-sm-9">
|
|
<a-date-picker :model="moment(model.start, dateFormat)" :format="dateFormat" @change="onChange1" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<div class="form-group row">
|
|
<label class="col-sm-3 col-form-label">结束:</label>
|
|
<div class="col-sm-9">
|
|
<a-date-picker :model="moment(model.end, dateFormat)" :format="dateFormat" @change="onChange2" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<div class="form-group row">
|
|
<div class="col-sm-12">
|
|
<button class="btn btn-primary" v-on:click="query">查询</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<table class="table">
|
|
<tr>
|
|
<th>#</th>
|
|
<th>属性名称</th>
|
|
<th>属性值</th>
|
|
<th>时间</th>
|
|
</tr>
|
|
<tr v-for="(item,i) in model.list">
|
|
<td>{{i+1}}</td>
|
|
<td>{{model.query.name}}</td>
|
|
<td>{{getValue(item.value)}}</td>
|
|
<td>{{toDate(item.timestamp)}}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="card-footer">
|
|
<views-shared-pagination :index.sync="model.pageIndex" :size.sync="model.pageSize" :total="model.totalCount" :callback="load" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</views-shared-layout>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data: function () {
|
|
return {
|
|
title: '历史数据',
|
|
url: config.service('platform/api/v1/Influx/History'),
|
|
dateFormat:'YYYY/MM/DD',
|
|
model: {
|
|
number: this.$route.query.number,
|
|
key: this.$route.query.key,
|
|
pageIndex: parseInt(this.$route.query.pageIndex) || 1,
|
|
pageSize: parseInt(this.$route.query.pageSize) || 20,
|
|
}
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.subscribe();
|
|
this.load();
|
|
},
|
|
beforeDestroy: function () {
|
|
PubSub.unsubscribes(this.events);
|
|
},
|
|
methods: {
|
|
query: function () {
|
|
this.model.pageIndex = 1;
|
|
this.load();
|
|
},
|
|
load: function () {
|
|
var vm = this;
|
|
this.model.list = [];
|
|
axios.post(this.url, this.model).then(function (response) {
|
|
vm.model = response.data;
|
|
});
|
|
},
|
|
subscribe: function () {
|
|
var vm = this;
|
|
PubSub.subscribes(this.events, function (method, data) {
|
|
parent.load();
|
|
});
|
|
},
|
|
toDate: function (value) {
|
|
return moment(value).format('YYYY-MM-DD HH:mm:ss.SSS');
|
|
},
|
|
getValue(value) {
|
|
if (this.model.query.enumValues) {
|
|
return JSON.parse(this.model.query.enumValues)[value] || value;
|
|
}
|
|
return value;
|
|
},
|
|
onChange1: function (date, dateString) {
|
|
this.model.start = dateString;
|
|
},
|
|
onChange2: function (date, dateString) {
|
|
this.model.end = dateString;
|
|
}
|
|
}
|
|
}
|
|
</script> |