596 lines
20 KiB
QML
596 lines
20 KiB
QML
import QtQuick 2.15
|
||
import QtQuick.Layouts
|
||
import QtQuick.Controls
|
||
import FluentUI.Controls
|
||
import FluentUI.impl
|
||
import Qt.labs.qmlmodels
|
||
import Qt5Compat.GraphicalEffects
|
||
|
||
import "base"
|
||
|
||
ColumnLayout {
|
||
id: control
|
||
signal clickSee(var data);
|
||
|
||
property var show_type: "card"
|
||
property var show_banner: true
|
||
property var show_tab: true
|
||
|
||
anchors.fill: parent
|
||
// 头部banner
|
||
Rectangle{
|
||
Layout.fillWidth: true
|
||
Layout.preferredHeight: 160
|
||
color: "transparent"
|
||
visible: show_banner
|
||
RowLayout{
|
||
anchors.fill: parent
|
||
spacing: 20
|
||
Rectangle{
|
||
Layout.preferredHeight: 80
|
||
Layout.preferredWidth: 80
|
||
radius: 40
|
||
layer.enabled: true
|
||
layer.effect: OpacityMask{
|
||
maskSource: Rectangle{
|
||
width: 80
|
||
height: 80
|
||
radius: 40
|
||
}
|
||
}
|
||
Layout.leftMargin: 30
|
||
Image{
|
||
anchors.fill: parent
|
||
source: "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg"
|
||
clip: true
|
||
}
|
||
}
|
||
Rectangle{
|
||
Layout.fillWidth: true
|
||
Layout.fillHeight: true
|
||
color: "transparent"
|
||
|
||
ColumnLayout{
|
||
anchors.fill: parent
|
||
Item{
|
||
height: 50
|
||
RowLayout{
|
||
Layout.fillWidth: true
|
||
Layout.fillHeight: true
|
||
Label{
|
||
id: lbl_name
|
||
text: "公司名称"
|
||
font.pointSize: 16
|
||
visible: false
|
||
}
|
||
LinearGradient {
|
||
Layout.preferredHeight: lbl_name.height
|
||
Layout.preferredWidth: lbl_name.width
|
||
source: lbl_name
|
||
start: Qt.point(0, 0)
|
||
end: Qt.point(lbl_name.width, 0)
|
||
gradient: Gradient {
|
||
GradientStop { position: 0.0; color: "#5BE49B" }
|
||
GradientStop { position: 1.0; color: "#00A76F" }
|
||
}
|
||
}
|
||
Rectangle{
|
||
Layout.preferredWidth: 56
|
||
Layout.preferredHeight: 24
|
||
Layout.leftMargin: 10
|
||
color: "#4D4D4D"
|
||
radius: 5
|
||
Label{
|
||
text: "免费版"
|
||
anchors.centerIn: parent
|
||
}
|
||
}
|
||
}
|
||
RowLayout{
|
||
anchors.top: parent.top
|
||
anchors.topMargin: 35
|
||
Label{
|
||
text: "下一代新能源创新团队"
|
||
color: Qt.rgba(255/255,255/255,255/255, 0.6)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
Rectangle{
|
||
Layout.preferredWidth: 230
|
||
Layout.fillHeight: true
|
||
color: "transparent"
|
||
RowLayout{
|
||
anchors.fill: parent
|
||
Rectangle{
|
||
Layout.preferredWidth: 97
|
||
Layout.preferredHeight: 36
|
||
color: Qt.rgba(255/255,255/255,255/255, 0.1)
|
||
radius: 5
|
||
RowLayout{
|
||
anchors.fill: parent
|
||
Image{
|
||
source: "qrc:/qt/qml/Gallery/res/image/components/user_add.png"
|
||
// anchors.left: parent.left
|
||
Layout.leftMargin: 6
|
||
}
|
||
|
||
Label{
|
||
text: "邀请成员"
|
||
Layout.leftMargin: 0
|
||
}
|
||
}
|
||
MouseArea{
|
||
anchors.fill: parent
|
||
hoverEnabled: true
|
||
onEntered: parent.color = Qt.rgba(255/255,255/255,255/255, 0.2)
|
||
onExited: parent.color = Qt.rgba(255/255,255/255,255/255, 0.1)
|
||
}
|
||
}
|
||
|
||
Rectangle{
|
||
Layout.preferredWidth: 97
|
||
Layout.preferredHeight: 36
|
||
color: Qt.rgba(255/255,255/255,255/255, 0.1)
|
||
gradient: Gradient {
|
||
orientation: Gradient.Horizontal
|
||
GradientStop { position: 0.0; color: "#77ED8B" }
|
||
GradientStop { position: 1.0; color: "#22C55E" }
|
||
}
|
||
|
||
radius: 5
|
||
RowLayout{
|
||
anchors.fill: parent
|
||
Image{
|
||
source: "qrc:/qt/qml/Gallery/res/image/components/plus.png"
|
||
// anchors.left: parent.left
|
||
// anchors.leftMargin: 10
|
||
Layout.leftMargin: 5
|
||
}
|
||
|
||
Label{
|
||
text: "添加项目"
|
||
color: "#2a2a2a"
|
||
// anchors.left: parent.left
|
||
// anchors.leftMargin: 32
|
||
// anchors.top: parent.top
|
||
// anchors.topMargin: 9
|
||
}
|
||
}
|
||
MouseArea{
|
||
anchors.fill: parent
|
||
hoverEnabled: true
|
||
onEntered: parent.gradient.stops[1].color = "#77ED8B"
|
||
onExited: parent.gradient.stops[1].color = "#22C55E"
|
||
onClicked: {
|
||
console.log("open")
|
||
dia_newproject.open()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
ListModel{
|
||
id: radio_type
|
||
ListElement{
|
||
uuid: "1"
|
||
title: "通用"
|
||
icon: "qrc:/qt/qml/Gallery/res/image/components/ico_tp_com.png"
|
||
}
|
||
ListElement{
|
||
uuid: "2"
|
||
title: "充换电"
|
||
icon: "qrc:/qt/qml/Gallery/res/image/components/ico_tp_ele.png"
|
||
}
|
||
ListElement{
|
||
uuid: "3"
|
||
title: "加氢制氢"
|
||
icon: "qrc:/qt/qml/Gallery/res/image/components/ico_tp_h2.png"
|
||
}
|
||
ListElement{
|
||
uuid: "4"
|
||
title: "车辆管理"
|
||
icon: "qrc:/qt/qml/Gallery/res/image/components/ico_tp_car.png"
|
||
}
|
||
}
|
||
|
||
ListModel{
|
||
id: style_type
|
||
ListElement{
|
||
uuid: "1"
|
||
title: "风格1"
|
||
}
|
||
ListElement{
|
||
uuid: "2"
|
||
title: "风格2"
|
||
}
|
||
ListElement{
|
||
uuid: "3"
|
||
title: "风格3"
|
||
}
|
||
}
|
||
|
||
// 新建项目弹框
|
||
MyDialogWindow {
|
||
id: dia_newproject
|
||
|
||
property var cur_type: "1"
|
||
|
||
title: "新建项目"
|
||
Rectangle {
|
||
implicitWidth: 610
|
||
implicitHeight: 390
|
||
color: "transparent"
|
||
ColumnLayout{
|
||
anchors.fill: parent
|
||
anchors.leftMargin: 10
|
||
anchors.topMargin: 10
|
||
anchors.rightMargin: 10
|
||
RowLayout{
|
||
spacing: 20
|
||
Layout.fillWidth: true
|
||
TextBox{
|
||
Layout.preferredWidth: 400
|
||
Layout.preferredHeight: 44
|
||
placeholderText: "标题"
|
||
}
|
||
ComboBox{
|
||
Layout.preferredWidth: 170
|
||
Layout.preferredHeight: 44
|
||
model: ListModel {
|
||
ListElement { text: "充换电" }
|
||
ListElement { text: "制加氢" }
|
||
ListElement { text: "车辆" }
|
||
}
|
||
}
|
||
}
|
||
|
||
Label{
|
||
Layout.topMargin: 15
|
||
text: "选择项目类型："
|
||
color: "#9E9E9E"
|
||
}
|
||
|
||
IconRadioGroup{
|
||
models: radio_type
|
||
}
|
||
|
||
RowLayout{
|
||
Layout.topMargin: 50
|
||
Label{
|
||
text: "选择地图风格："
|
||
color: "#9E9E9E"
|
||
}
|
||
Switch {
|
||
text: ""
|
||
checked: true
|
||
FluentUI.primaryColor: "#77ED8B"
|
||
}
|
||
}
|
||
|
||
RowLayout{
|
||
spacing: 20
|
||
Layout.fillWidth: true
|
||
Repeater {
|
||
model: style_type
|
||
StyleButton{
|
||
p_txt: model.title
|
||
p_check: dia_newproject.cur_type == model.uuid
|
||
onClicked: {
|
||
dia_newproject.cur_type = model.uuid
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
Rectangle{
|
||
Layout.fillWidth: true
|
||
Layout.preferredHeight: 70
|
||
color: "#1b1b1b"
|
||
Layout.topMargin: 10
|
||
Layout.leftMargin: -20
|
||
Layout.rightMargin: -20
|
||
Layout.bottomMargin: 0
|
||
RowLayout{
|
||
anchors.fill: parent
|
||
anchors.leftMargin: 20
|
||
anchors.rightMargin: 20
|
||
spacing: 20
|
||
Button{
|
||
Layout.fillWidth: true
|
||
Layout.preferredHeight: 36
|
||
text: "取消"
|
||
onClicked: {
|
||
dia_newproject.close()
|
||
}
|
||
}
|
||
Button{
|
||
Layout.fillWidth: true
|
||
Layout.preferredHeight: 36
|
||
text: "确认"
|
||
highlighted: true
|
||
background: Rectangle{
|
||
radius: 5
|
||
gradient: Gradient {
|
||
orientation: Gradient.Horizontal
|
||
GradientStop { position: 0.0; color: "#77ED8B" }
|
||
GradientStop { position: 1.0; color: "#22C55E" }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
Item{
|
||
Layout.fillHeight: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 标签切换！！！
|
||
ListModel{
|
||
id: tab_model
|
||
ListElement{
|
||
title: "全部"
|
||
}
|
||
ListElement{
|
||
title: "成员"
|
||
}
|
||
ListElement{
|
||
title: "设置"
|
||
}
|
||
ListElement{
|
||
title: "回收站"
|
||
}
|
||
}
|
||
|
||
// tabs
|
||
Rectangle{
|
||
visible: show_tab
|
||
Layout.leftMargin: 30
|
||
Layout.rightMargin: 30
|
||
Layout.fillWidth: true
|
||
Layout.preferredHeight: 40
|
||
color: "transparent"
|
||
MyTabBar {
|
||
anchors.fill: parent
|
||
id: bar
|
||
clip: true
|
||
bottomPadding: 0
|
||
Repeater {
|
||
model: tab_model
|
||
MyTabButton {
|
||
id: btn_tab
|
||
text: model.title
|
||
font.pointSize: 12
|
||
height: 33
|
||
width: 80
|
||
}
|
||
}
|
||
background: Rectangle {
|
||
height: 2
|
||
width: parent.width
|
||
anchors.bottom: parent.bottom
|
||
anchors.bottomMargin: 1
|
||
anchors.left: parent.left
|
||
anchors.leftMargin: 5
|
||
color: '#404143'
|
||
}
|
||
}
|
||
|
||
IconButton{
|
||
text: ""
|
||
icon.name: control.show_type == 'list' ? FluentIcons.graph_ViewAll : FluentIcons.graph_GlobalNavButton
|
||
icon.width: 18
|
||
icon.height: 18
|
||
spacing: 5
|
||
anchors.right: parent.right
|
||
anchors.top: parent.top
|
||
anchors.topMargin: 3
|
||
onClicked: {
|
||
if (control.show_type == "list") {
|
||
control.show_type = "card"
|
||
} else {
|
||
control.show_type = 'list'
|
||
}
|
||
}
|
||
}
|
||
// FluentIcons.graph_GlobalNavButton
|
||
// FluentIcons.graph_ViewAll
|
||
}
|
||
Rectangle{
|
||
visible: !show_tab
|
||
Layout.leftMargin: 30
|
||
Layout.rightMargin: 30
|
||
Layout.fillWidth: true
|
||
Layout.preferredHeight: 30
|
||
color: "transparent"
|
||
IconButton{
|
||
text: ""
|
||
icon.name: control.show_type == 'list' ? FluentIcons.graph_ViewAll : FluentIcons.graph_GlobalNavButton
|
||
icon.width: 18
|
||
icon.height: 18
|
||
spacing: 5
|
||
anchors.right: parent.right
|
||
anchors.top: parent.top
|
||
anchors.topMargin: 3
|
||
onClicked: {
|
||
if (control.show_type == "list") {
|
||
control.show_type = "card"
|
||
} else {
|
||
control.show_type = 'list'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
Component{
|
||
id:comp_page
|
||
Frame{
|
||
anchors.fill: parent
|
||
Label{
|
||
anchors.centerIn: parent
|
||
text: modelData.title
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
ListModel{
|
||
id: list_model
|
||
ListElement {
|
||
uuid: "0"
|
||
title: ""
|
||
company: ""
|
||
time: ""
|
||
desc: ""
|
||
img: "qrc:/qt/qml/Gallery/res/image/img/add.png"
|
||
}
|
||
|
||
ListElement {
|
||
uuid: "1"
|
||
title: "赋新站25年1月计费（充电）"
|
||
company: "绿电智联（浙江）数据科技有限公司"
|
||
time: "2025-01-05 12:00:00"
|
||
desc: ""
|
||
img: "qrc:/qt/qml/Gallery/res/image/img/map.png"
|
||
}
|
||
ListElement {
|
||
uuid: "2"
|
||
title: "河津站"
|
||
company: "绿电智联（浙江）数据科技有限公司"
|
||
time: "2025-01-05 12:00:00"
|
||
desc: ""
|
||
img: "qrc:/qt/qml/Gallery/res/image/img/map.png"
|
||
}
|
||
ListElement {
|
||
uuid: "2"
|
||
title: "河津站"
|
||
company: "绿电智联（浙江）数据科技有限公司"
|
||
time: "2025-01-05 12:00:00"
|
||
desc: ""
|
||
img: "qrc:/qt/qml/Gallery/res/image/img/map.png"
|
||
}
|
||
ListElement {
|
||
uuid: "2"
|
||
title: "河津站"
|
||
company: "绿电智联（浙江）数据科技有限公司"
|
||
time: "2025-01-05 12:00:00"
|
||
desc: ""
|
||
img: "qrc:/qt/qml/Gallery/res/image/img/map.png"
|
||
}
|
||
ListElement {
|
||
uuid: "2"
|
||
title: "河津站"
|
||
company: "绿电智联（浙江）数据科技有限公司"
|
||
time: "2025-01-05 12:00:00"
|
||
desc: ""
|
||
img: "qrc:/qt/qml/Gallery/res/image/img/map.png"
|
||
}
|
||
ListElement {
|
||
uuid: "2"
|
||
title: "河津站"
|
||
company: "绿电智联（浙江）数据科技有限公司"
|
||
time: "2025-01-05 12:00:00"
|
||
desc: ""
|
||
img: "qrc:/qt/qml/Gallery/res/image/img/map.png"
|
||
}
|
||
ListElement {
|
||
uuid: "2"
|
||
title: "河津站"
|
||
company: "绿电智联（浙江）数据科技有限公司"
|
||
time: "2025-01-05 12:00:00"
|
||
desc: ""
|
||
img: "qrc:/qt/qml/Gallery/res/image/img/map.png"
|
||
}
|
||
ListElement {
|
||
uuid: "2"
|
||
title: "河津站"
|
||
company: "绿电智联（浙江）数据科技有限公司"
|
||
time: "2025-01-05 12:00:00"
|
||
desc: ""
|
||
img: "qrc:/qt/qml/Gallery/res/image/img/map.png"
|
||
}
|
||
ListElement {
|
||
uuid: "2"
|
||
title: "河津站"
|
||
company: "绿电智联（浙江）数据科技有限公司"
|
||
time: "2025-01-05 12:00:00"
|
||
desc: ""
|
||
img: "qrc:/qt/qml/Gallery/res/image/img/map.png"
|
||
}
|
||
ListElement {
|
||
uuid: "2"
|
||
title: "河津站"
|
||
company: "绿电智联（浙江）数据科技有限公司"
|
||
time: "2025-01-05 12:00:00"
|
||
desc: ""
|
||
img: "qrc:/qt/qml/Gallery/res/image/img/map.png"
|
||
}
|
||
}
|
||
|
||
Rectangle{
|
||
Layout.fillWidth: true
|
||
Layout.fillHeight: true
|
||
color: "transparent"
|
||
StackLayout {
|
||
anchors.fill: parent
|
||
anchors.leftMargin: 30
|
||
anchors.rightMargin: 30
|
||
anchors.bottomMargin: 20
|
||
currentIndex: bar.currentIndex
|
||
|
||
// 主内容区域
|
||
ProjectList{
|
||
id: pl_com
|
||
show_type: control.show_type
|
||
p_data: list_model
|
||
p_cellW: {
|
||
var width1 = parent.width / 4
|
||
var width2 = parent.width / 3
|
||
var width3 = parent.width / 2
|
||
|
||
if (width1 < 290) {
|
||
if (width2 < 180) {
|
||
return width3
|
||
}
|
||
return width2
|
||
}
|
||
return width1
|
||
}
|
||
|
||
p_cellH: pl_com.p_cellW * 0.8
|
||
|
||
onClickItem: function(item) {
|
||
control.clickSee(item)
|
||
}
|
||
onClickNewItem: function() {
|
||
dia_newproject.open()
|
||
}
|
||
}
|
||
|
||
|
||
Rectangle{
|
||
color: "yellow"
|
||
}
|
||
Rectangle{
|
||
color: "blue"
|
||
}
|
||
Rectangle{
|
||
color: "cyan"
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|