366 lines
12 KiB
QML
366 lines
12 KiB
QML
import QtQuick
|
||
import QtQuick.Layouts
|
||
import RibbonUI
|
||
|
||
/* 仅适用于DL-LN3X系列 */
|
||
|
||
Flow{
|
||
id: control
|
||
property alias text: label.text
|
||
property bool show_text: true
|
||
property bool dark_mode: RibbonTheme.dark_mode
|
||
property bool show_tooltip: true
|
||
property bool is_recieved: false
|
||
property int font_size: 13
|
||
property double component_width: 300
|
||
property int data_width: component_width - (show_text ? label.width : 0) - z_head.width - z_length.width - z_src_port.width -
|
||
z_des_port.width - z_address.width - z_tail.width - spacing*(show_text ? 13 : 12) - 6
|
||
property var data_list
|
||
padding: 5
|
||
|
||
RibbonText {
|
||
id: label
|
||
|
||
height: z_data.height + control.padding * 2
|
||
color: control.dark_mode ? "white" : control.is_recieved ? "black" : "white"
|
||
font.pixelSize: control.font_size
|
||
visible: control.show_text
|
||
horizontalAlignment: RibbonText.AlignHCenter
|
||
verticalAlignment: RibbonText.AlignVCenter
|
||
}
|
||
|
||
RibbonRectangle{
|
||
radius: 5
|
||
topRightRadius: 0
|
||
bottomRightRadius: topRightRadius
|
||
implicitWidth: z_head.contentWidth + control.padding * 2
|
||
implicitHeight: z_data.height + control.padding * 2
|
||
|
||
color: z_head_hh.hovered ? control.is_recieved ? control.dark_mode ? "#262626" : "#F0F0F0" : control.dark_mode ? "#313131" : "#6099AA" : "transparent"
|
||
RibbonText {
|
||
id: z_head
|
||
anchors.centerIn: parent
|
||
color: control.dark_mode ? "white" : control.is_recieved ? "black" : "white"
|
||
text: typeof(data_list[0]) !== "undefined" ? data_list[0] : ""
|
||
font.pixelSize: control.font_size
|
||
horizontalAlignment: RibbonText.AlignHCenter
|
||
verticalAlignment: RibbonText.AlignVCenter
|
||
Behavior on color {
|
||
ColorAnimation {
|
||
duration: 60
|
||
easing.type: Easing.OutSine
|
||
}
|
||
}
|
||
}
|
||
|
||
RibbonToolTip{
|
||
text: "ZigBee帧 头"
|
||
visible: z_head_hh.hovered && control.show_tooltip
|
||
}
|
||
|
||
HoverHandler{
|
||
id: z_head_hh
|
||
}
|
||
}
|
||
|
||
|
||
Item {
|
||
height: z_data.height + control.padding * 2
|
||
width: 1
|
||
Rectangle{
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
width: 1
|
||
height: z_data.height - control.padding * 2
|
||
color: control.dark_mode ? "#525252" : "#D4D4D4"
|
||
Behavior on color {
|
||
ColorAnimation {
|
||
duration: 60
|
||
easing.type: Easing.OutSine
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
RibbonRectangle{
|
||
radius: 0
|
||
color: z_length_hh.hovered ? control.is_recieved ? control.dark_mode ? "#262626" : "#F0F0F0" : control.dark_mode ? "#313131" : "#6099AA" : "transparent"
|
||
implicitWidth: z_length.contentWidth + control.padding * 2
|
||
implicitHeight: z_data.height + control.padding * 2
|
||
|
||
RibbonText {
|
||
id: z_length
|
||
anchors.centerIn: parent
|
||
color: control.dark_mode ? "white" : control.is_recieved ? "black" : "white"
|
||
text: typeof(data_list[0]) !== "undefined" ? data_list[1] : ""
|
||
font.pixelSize: control.font_size
|
||
horizontalAlignment: RibbonText.AlignHCenter
|
||
verticalAlignment: RibbonText.AlignVCenter
|
||
Behavior on color {
|
||
ColorAnimation {
|
||
duration: 60
|
||
easing.type: Easing.OutSine
|
||
}
|
||
}
|
||
}
|
||
|
||
RibbonToolTip{
|
||
text: "ZigBee帧 长"
|
||
visible: z_length_hh.hovered && control.show_tooltip
|
||
}
|
||
|
||
HoverHandler{
|
||
id: z_length_hh
|
||
}
|
||
}
|
||
|
||
Item {
|
||
height: z_data.height + control.padding * 2
|
||
width: 1
|
||
Rectangle{
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
width: 1
|
||
height: z_data.height - control.padding * 2
|
||
color: control.dark_mode ? "#525252" : "#D4D4D4"
|
||
Behavior on color {
|
||
ColorAnimation {
|
||
duration: 60
|
||
easing.type: Easing.OutSine
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
RibbonRectangle{
|
||
radius: 0
|
||
color: z_src_port_hh.hovered ? control.is_recieved ? control.dark_mode ? "#262626" : "#F0F0F0" : control.dark_mode ? "#313131" : "#6099AA" : "transparent"
|
||
implicitWidth: z_src_port.contentWidth + control.padding * 2
|
||
implicitHeight: z_data.height + control.padding * 2
|
||
|
||
|
||
RibbonText {
|
||
id: z_src_port
|
||
anchors.centerIn: parent
|
||
color: control.dark_mode ? "white" : control.is_recieved ? "black" : "white"
|
||
text: typeof(data_list[0]) !== "undefined" ? data_list[2] : ""
|
||
font.pixelSize: control.font_size
|
||
horizontalAlignment: RibbonText.AlignHCenter
|
||
verticalAlignment: RibbonText.AlignVCenter
|
||
Behavior on color {
|
||
ColorAnimation {
|
||
duration: 60
|
||
easing.type: Easing.OutSine
|
||
}
|
||
}
|
||
}
|
||
|
||
RibbonToolTip{
|
||
text: "ZigBee帧 源端口"
|
||
visible: z_src_port_hh.hovered && control.show_tooltip
|
||
}
|
||
|
||
HoverHandler{
|
||
id: z_src_port_hh
|
||
}
|
||
}
|
||
|
||
Item {
|
||
height: z_data.height + control.padding * 2
|
||
width: 1
|
||
Rectangle{
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
width: 1
|
||
height: z_data.height - control.padding * 2
|
||
color: control.dark_mode ? "#525252" : "#D4D4D4"
|
||
Behavior on color {
|
||
ColorAnimation {
|
||
duration: 60
|
||
easing.type: Easing.OutSine
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
RibbonRectangle{
|
||
radius: 0
|
||
color: z_des_port_hh.hovered ? control.is_recieved ? control.dark_mode ? "#262626" : "#F0F0F0" : control.dark_mode ? "#313131" : "#6099AA" : "transparent"
|
||
implicitWidth: z_des_port.contentWidth + control.padding * 2
|
||
implicitHeight: z_data.height + control.padding * 2
|
||
|
||
|
||
RibbonText {
|
||
id: z_des_port
|
||
anchors.centerIn: parent
|
||
color: control.dark_mode ? "white" : control.is_recieved ? "black" : "white"
|
||
text: typeof(data_list[0]) !== "undefined" ? data_list[3] : ""
|
||
font.pixelSize: control.font_size
|
||
horizontalAlignment: RibbonText.AlignHCenter
|
||
verticalAlignment: RibbonText.AlignVCenter
|
||
Behavior on color {
|
||
ColorAnimation {
|
||
duration: 60
|
||
easing.type: Easing.OutSine
|
||
}
|
||
}
|
||
}
|
||
|
||
RibbonToolTip{
|
||
text: "ZigBee帧 目的端口"
|
||
visible: z_des_port_hh.hovered && control.show_tooltip
|
||
}
|
||
|
||
HoverHandler{
|
||
id: z_des_port_hh
|
||
}
|
||
}
|
||
|
||
Item {
|
||
height: z_data.height + control.padding * 2
|
||
width: 1
|
||
Rectangle{
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
width: 1
|
||
height: z_data.height - control.padding * 2
|
||
color: control.dark_mode ? "#525252" : "#D4D4D4"
|
||
Behavior on color {
|
||
ColorAnimation {
|
||
duration: 60
|
||
easing.type: Easing.OutSine
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
RibbonRectangle{
|
||
radius: 0
|
||
color: z_address_hh.hovered ? control.is_recieved ? control.dark_mode ? "#262626" : "#F0F0F0" : control.dark_mode ? "#313131" : "#6099AA" : "transparent"
|
||
implicitWidth: z_address.contentWidth + control.padding * 2
|
||
implicitHeight: z_data.height + control.padding * 2
|
||
|
||
RibbonText {
|
||
id: z_address
|
||
anchors.centerIn: parent
|
||
color: control.dark_mode ? "white" : control.is_recieved ? "black" : "white"
|
||
text: typeof(data_list[0]) !== "undefined" ? data_list.slice(4,6).join(" ") : ""
|
||
font.pixelSize: control.font_size
|
||
horizontalAlignment: RibbonText.AlignHCenter
|
||
verticalAlignment: RibbonText.AlignVCenter
|
||
Behavior on color {
|
||
ColorAnimation {
|
||
duration: 60
|
||
easing.type: Easing.OutSine
|
||
}
|
||
}
|
||
}
|
||
|
||
RibbonToolTip{
|
||
text: `ZigBee帧 源地址, 采用小端序，实际地址为0x${data_list[5]}${data_list[4]}`
|
||
visible: z_address_hh.hovered && control.show_tooltip
|
||
}
|
||
|
||
HoverHandler{
|
||
id: z_address_hh
|
||
}
|
||
}
|
||
|
||
Item {
|
||
height: z_data.height + control.padding * 2
|
||
width: 1
|
||
Rectangle{
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
width: 1
|
||
height: z_data.height - control.padding * 2
|
||
color: control.dark_mode ? "#525252" : "#D4D4D4"
|
||
Behavior on color {
|
||
ColorAnimation {
|
||
duration: 60
|
||
easing.type: Easing.OutSine
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
RibbonRectangle{
|
||
radius: 0
|
||
color: z_data_hh.hovered ? control.is_recieved ? control.dark_mode ? "#262626" : "#F0F0F0" : control.dark_mode ? "#313131" : "#6099AA" : "transparent"
|
||
implicitWidth: z_data.width + control.padding * 2
|
||
implicitHeight: z_data.height + control.padding * 2
|
||
|
||
RibbonText {
|
||
id: z_data
|
||
anchors.centerIn: parent
|
||
color: control.dark_mode ? "white" : control.is_recieved ? "black" : "white"
|
||
width: implicitWidth < control.data_width ? implicitWidth : control.data_width
|
||
wrapMode: RibbonText.Wrap
|
||
text: typeof(data_list[0]) !== "undefined" ? data_list.slice(6,data_list.length-1).join(" ") : ""
|
||
font.pixelSize: control.font_size
|
||
Behavior on color {
|
||
ColorAnimation {
|
||
duration: 60
|
||
easing.type: Easing.OutSine
|
||
}
|
||
}
|
||
}
|
||
|
||
RibbonToolTip{
|
||
text: "ZigBee帧 数据"
|
||
visible: z_data_hh.hovered && control.show_tooltip
|
||
}
|
||
|
||
HoverHandler{
|
||
id: z_data_hh
|
||
}
|
||
}
|
||
|
||
Item {
|
||
height: z_data.height + control.padding * 2
|
||
width: 1
|
||
Rectangle{
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
width: 1
|
||
height: z_data.height - control.padding * 2
|
||
color: control.dark_mode ? "#525252" : "#D4D4D4"
|
||
Behavior on color {
|
||
ColorAnimation {
|
||
duration: 60
|
||
easing.type: Easing.OutSine
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
RibbonRectangle{
|
||
radius: parent.radius ? parent.radius / 2 : 5
|
||
color: z_tail_hh.hovered ? control.is_recieved ? control.dark_mode ? "#262626" : "#F0F0F0" : control.dark_mode ? "#313131" : "#6099AA" : "transparent"
|
||
topLeftRadius: 0
|
||
bottomLeftRadius: topLeftRadius
|
||
implicitWidth: z_tail.contentWidth + control.padding * 2
|
||
implicitHeight: z_data.height + control.padding * 2
|
||
|
||
RibbonText {
|
||
id: z_tail
|
||
anchors.centerIn: parent
|
||
color: control.dark_mode ? "white" : control.is_recieved ? "black" : "white"
|
||
text: typeof(data_list[0]) !== "undefined" ? data_list[data_list.length-1] : ""
|
||
font.pixelSize: control.font_size
|
||
horizontalAlignment: RibbonText.AlignHCenter
|
||
verticalAlignment: RibbonText.AlignVCenter
|
||
Behavior on color {
|
||
ColorAnimation {
|
||
duration: 60
|
||
easing.type: Easing.OutSine
|
||
}
|
||
}
|
||
}
|
||
|
||
RibbonToolTip{
|
||
text: "ZigBee帧 尾"
|
||
visible: z_tail_hh.hovered && control.show_tooltip
|
||
}
|
||
|
||
HoverHandler{
|
||
id: z_tail_hh
|
||
}
|
||
}
|
||
}
|
||
|