TG-PlatformPlus/qml/Charts.qml

384 lines
11 KiB
QML

import QtQuick
import QtQuick.Controls
import TCustomPlot
import "./common"
// import "./Style"
Item {
id: self
width: 400
height: 300
property var guid: getGuid()
property var name: parent.title
property int __activeIndex: 1
property real __intervalCoefficient: 0
property var dateArr: ["00:00", "01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00", "23:00"]
property var fieldItems: []
property var starttime: ""
property var stoptime: ""
property var t_value: 0
property var old_value: 0
property var firstInit: true
signal removeTabItem(var guid)
signal changeData(var dataStr)
property var lasttime: -1
onNameChanged: {
if(starttime != "" && stoptime != "" && name !== "" && guid !== "")
{
var req = {
"guid": guid,
"name": name,
"starttime": starttime,
"stoptime": stoptime,
"fieldItems": fieldItems
}
changeData(JSON.stringify(req))
}
}
//![1]
TCustomPlot {
id: customPlot
focus: true
anchors.fill: parent
MouseArea{
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.AllButtons
propagateComposedEvents: false
onPressed:
{
if( mouse.buttons == Qt.RightButton )
{
menuTime.popup()
}
else
{
mouse.accepted = false
}
}
onPositionChanged: {
toolTip.x = ( mouseX + toolTip.width) > width ? (mouseX-toolTip.width) : mouseX
toolTip.y = mouseY
var arr = customPlot.positionChange(mouseX, mouseY)
t_value = ""
arr.forEach(function(obj){
t_value += obj.time + " " + obj.value + "\n"
if( old_value !== t_value)
{
old_value = t_value
}
})
}
}
}
Item{
id: toolTip
width: 200
height: 20
visible: old_value !== "nan"
Text{
anchors.centerIn: parent
color:"white"
text: old_value === "nan" ? "" : old_value
}
}
function removeTab()
{
removeTabItem(guid)
}
function getGuid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return (
s4() +
s4() +
"-" +
s4() +
"-4" +
s4().substr(0, 3) +
"-" +
s4() +
"-" +
s4() +
s4() +
s4()
);
}
function setTime(start, stop){
starttime = start
stoptime = stop
}
function setFieldItems(_fieldItems){
fieldItems = _fieldItems
setColors(fieldItems.length)
}
function appendGraph(start, stop)
{
starttime = start
stoptime = stop
var req = {
"guid": guid,
"name": name,
"starttime": starttime,
"stoptime": stoptime,
"fieldItems": fieldItems
}
for( var i = 0; i < fieldItems.length; ++i)
{
var item = fieldItems[i]
var measurements = []
var fields = []
measurements.push(item.parentName)
fields.push(item.name)
var req = {
"bucket": g_curPro.name,
"start" : start,
"stop": stop,
"measurement": measurements,
"field": fields
}
var result = backend_proxy.influx_query_data(JSON.stringify(req))
if(result.code !== 200)
{
alert.show(result.msg)
return
}
customPlot.addGraphData(JSON.stringify(result.data), i )
}
if(stoptime == "now()")
timerAdd.start()
}
function searchData(start, stop)
{
starttime = start
stoptime = stop
var req = {
"guid": guid,
"name": name,
"starttime": starttime,
"stoptime": stoptime,
"fieldItems": fieldItems
}
changeData( JSON.stringify(req) )
// customPlot.clearData()
var measurements = []
var fields = []
var check_measurements = {}
for( var i = 0; i < fieldItems.length; ++i)
{
var item = fieldItems[i]
measurements.push(item.parentName)
fields.push(item.name)
check_measurements[item.parentName + item.name] = true
}
measurements = Array.from(new Set(measurements))
fields = Array.from(new Set(fields))
var req = {
"bucket": g_curPro.name,
"start" : start,
"stop": stop,
"measurement": measurements,
"field": fields
}
var result = backend_proxy.influx_query_data(JSON.stringify(req))
if(result.code !== 200)
{
alert.show(result.msg)
return
}
customPlot.setGraphData(JSON.stringify(result.data) , JSON.stringify(check_measurements))
if(stoptime == "now()" && self.visible)
timerAdd.start()
}
Menu {
id: menuTime
MenuItem {
text: "自定义"
onTriggered: datePicker.visible = true
}
MenuItem {
text: "前5分钟"
onTriggered: searchData("-5m", "now()")
}
MenuItem {
text: "前15分钟"
onTriggered: searchData("-15m", "now()")
}
MenuItem {
text: "前1小时"
onTriggered: searchData("-1h", "now()")
}
MenuItem {
text: "前3小时"
onTriggered: searchData("-3h", "now()")
}
MenuItem {
text: "前6小时"
onTriggered: searchData("-6h", "now()")
}
MenuItem {
text: "前12小时"
onTriggered: searchData("-12h", "now()")
}
MenuItem {
text: "前24小时"
onTriggered: searchData("-24h", "now()")
}
MenuItem {
text: "前2天"
onTriggered: searchData("-2d", "now()")
}
MenuItem {
text: "前7天"
onTriggered: searchData("-7d", "now()")
}
MenuItem {
text: "前30天"
onTriggered: searchData("-30d", "now()")
}
}
Rectangle
{
id: datePicker
anchors.centerIn: parent
width: 620
height: 400
visible: false
MouseArea
{
anchors.fill:parent
onClicked:{}
}
Column{
anchors.centerIn: parent
Row
{
Column{
Rectangle
{
width: 310
height: 50
radius: 10
Row{
anchors.fill: parent
spacing: 5
Item{
width: 10
height: 1
}
QxText{
text: "开始时间:"
}
QxText{
id: txtStartTime
text: Qt.formatDateTime(startDate.selectedDate, "yyyy-MM-dd") +" "+ dateArr[startTime.currentIndex]
}
}
}
Row{
Calendar {
id: startDate
minimumDate: new Date(1970, 1, 1)
maximumDate: new Date()
}
Tumbler {
id: startTime
model: dateArr
}
}
}
Column{
Rectangle
{
width: 310
height: 50
radius: 10
Row{
anchors.fill: parent
spacing: 5
Item{
width: 10
height: 1
}
QxText{
text: "结束时间:"
}
QxText{
id: txtStopTime
text: Qt.formatDateTime(stopDate.selectedDate, "yyyy-MM-dd") + " " + dateArr[stopTime.currentIndex]
}
}
}
Row{
Calendar {
id: stopDate
minimumDate: new Date(1970, 1, 1)
maximumDate: new Date()
}
Tumbler {
id: stopTime
model: dateArr
}
}
}
}
Item{
width: parent.width
height: 50
Button{
anchors.centerIn: parent
text: "确认"
// style: ButtonStyle{}
onClicked:{
datePicker.visible = false
searchData(new Date(txtStartTime.text).getTime()/1000, new Date(txtStopTime.text).getTime()/1000)
}
}
}
}
}
Timer {
id: initTimer
interval: 10; running: parent.visible && firstInit; repeat: false
onTriggered: {
firstInit = false
searchData(starttime, stoptime)
}
}
Timer {
id: timerAdd
interval: 2000; running: false; repeat: false
onTriggered:{
searchData(starttime, stoptime)
}
}
function setColors(count)
{
customPlot.setColors(count)
}
function setGraphData(jsonStr)
{
}
}