400 lines
15 KiB
QML
400 lines
15 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"
|
|
import "nav"
|
|
ColumnLayout {
|
|
id: control
|
|
|
|
property var p_show_nav: false
|
|
property var p_nav_type: 'car'
|
|
|
|
Rectangle{
|
|
id: search_bar
|
|
// Layout.fillWidth: true
|
|
Layout.preferredWidth: 350
|
|
Layout.preferredHeight: 55
|
|
color: Qt.rgba(0/255,0/255,0/255, 0.5)
|
|
radius: 10
|
|
|
|
Rectangle{
|
|
width: parent.width - 20 - 42
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: 10
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
height: 32
|
|
color: '#000'
|
|
TextBox{
|
|
id: tb_searcn
|
|
anchors.fill: parent
|
|
placeholderText: "请输入图层名称"
|
|
trailing: IconButton{
|
|
implicitWidth: 30
|
|
implicitHeight: 20
|
|
icon.name: FluentIcons.graph_Search
|
|
icon.width: 14
|
|
icon.height: 14
|
|
padding: 0
|
|
}
|
|
background: InputBackground {
|
|
implicitWidth: 200
|
|
implicitHeight: 32
|
|
activeColor: "#22C55E"
|
|
radius: 0
|
|
color: {
|
|
if(!tb_searcn.enabled){
|
|
return tb_searcn.FluentUI.theme.res.controlFillColorDisabled
|
|
}else if(tb_searcn.activeFocus){
|
|
return tb_searcn.FluentUI.theme.res.controlFillColorInputActive
|
|
}else if(tb_searcn.hovered){
|
|
return tb_searcn.FluentUI.theme.res.controlFillColorSecondary
|
|
}else{
|
|
return tb_searcn.FluentUI.theme.res.controlFillColorDefault
|
|
}
|
|
}
|
|
target: tb_searcn
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle{
|
|
id: btn_search
|
|
width: 32
|
|
height: 32
|
|
radius: 8
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: 10
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
gradient: Gradient {
|
|
orientation: Gradient.Horizontal
|
|
GradientStop { position: 0.0; color: control.p_show_nav ? "#77ED8B" : Qt.rgba(255/255,255/255,255/255, 0.05) }
|
|
GradientStop { position: 1.0; color: control.p_show_nav ? "#22C55E" : Qt.rgba(255/255,255/255,255/255, 0.05) }
|
|
}
|
|
Image{
|
|
source: "qrc:/qt/qml/Gallery/res/image/components/map/ico_route.png"
|
|
anchors.centerIn: parent
|
|
ColorOverlay{
|
|
id: co_img
|
|
anchors.fill: parent
|
|
color: "#2a2a2a"
|
|
source: parent
|
|
visible: false
|
|
}
|
|
}
|
|
MouseArea{
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onEntered: {
|
|
if (!control.p_show_nav) {
|
|
parent.gradient.stops[0].color = "#77ED8B"
|
|
parent.gradient.stops[1].color = "#22C55E"
|
|
co_img.visible = true
|
|
}
|
|
}
|
|
onExited: {
|
|
if (!control.p_show_nav) {
|
|
parent.gradient.stops[0].color = Qt.rgba(255/255,255/255,255/255, 0.05)
|
|
parent.gradient.stops[1].color = Qt.rgba(255/255,255/255,255/255, 0.05)
|
|
co_img.visible = false
|
|
}
|
|
}
|
|
onClicked: {
|
|
console.log("open")
|
|
control.p_show_nav = !control.p_show_nav
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ListModel{
|
|
id: key_point_model
|
|
ListElement{
|
|
p_txt: "起"
|
|
p_tip_txt: "请输入起点"
|
|
p_del: false
|
|
}
|
|
ListElement{
|
|
p_txt: "终"
|
|
p_tip_txt: "请输入终点"
|
|
p_del: false
|
|
}
|
|
}
|
|
|
|
Item{
|
|
// Layout.fillWidth: true
|
|
id: it_height
|
|
Layout.preferredWidth: 350
|
|
Layout.fillHeight: true
|
|
Layout.topMargin: 0
|
|
clip: true
|
|
visible: control.p_show_nav
|
|
|
|
Rectangle{
|
|
id: result_panel
|
|
color: "transparent"//Qt.rgba(0/255,0/255,0/255, 0.5)//Qt.rgba(255/255,255/255,255/255, 0.05)
|
|
radius: 10
|
|
width: parent.width
|
|
height: {
|
|
console.log(it_input.height + "--" + parent.height)
|
|
return it_input.implicitHeight + tp_container.implicitHeight + cl_ranges.height + 80 + 30 + 25// + cl_detail.height
|
|
}
|
|
|
|
Rectangle{
|
|
id: blur_bg
|
|
anchors.fill: parent
|
|
color: Qt.rgba(0/255,0/255,0/255, 0.5)
|
|
radius: 10
|
|
}
|
|
|
|
// layer.effect: ShaderEffect {
|
|
// id: effectSource
|
|
// anchors.fill: parent
|
|
|
|
// FastBlur{
|
|
// id: blur
|
|
// anchors.fill: blur_bg
|
|
// source: blur_bg
|
|
// radius: 32
|
|
// }
|
|
// }
|
|
|
|
// FastBlur{
|
|
// anchors.fill: parent
|
|
// source: blur_bg
|
|
// radius: 64
|
|
// }
|
|
|
|
ColumnLayout{
|
|
id: cl_container
|
|
width: parent.width
|
|
spacing: 10
|
|
Item{
|
|
Layout.preferredHeight: 40
|
|
Layout.preferredWidth: result_panel.width
|
|
RowLayout{
|
|
id: tp_container
|
|
width: 140
|
|
anchors.centerIn: parent
|
|
spacing: 10
|
|
MyImgButton{
|
|
p_img: "nav_car.png"
|
|
p_checked: control.p_nav_type === 'car' ? true : false
|
|
onClickItem: control.p_nav_type = 'car'
|
|
}
|
|
MyImgButton{
|
|
p_img: "nav_truck.png"
|
|
p_checked: control.p_nav_type === 'truck' ? true : false
|
|
onClickItem: control.p_nav_type = 'truck'
|
|
}
|
|
MyImgButton{
|
|
p_img: "nav_walk.png"
|
|
p_checked: control.p_nav_type === 'walk' ? true : false
|
|
onClickItem: control.p_nav_type = 'walk'
|
|
}
|
|
MyImgButton{
|
|
p_img: "nav_bike.png"
|
|
p_checked: control.p_nav_type === 'bike' ? true : false
|
|
onClickItem: control.p_nav_type = 'bike'
|
|
}
|
|
}
|
|
}
|
|
|
|
Item{
|
|
Layout.preferredHeight: key_point_model.count * 30 + (key_point_model.count - 1) * 10
|
|
Layout.preferredWidth: result_panel.width
|
|
RowLayout{
|
|
id: it_input
|
|
anchors.fill: parent
|
|
|
|
Item{
|
|
Layout.leftMargin: 8
|
|
width: 22
|
|
Layout.preferredHeight: parent.height
|
|
Image{
|
|
anchors.centerIn: parent
|
|
source: "qrc:/qt/qml/Gallery/res/image/components/map/ico_exchange.png"
|
|
ColorOverlay{
|
|
id: img_ex
|
|
anchors.fill: parent
|
|
color: "#77ED8B"
|
|
source: parent
|
|
visible: false
|
|
}
|
|
MouseArea{
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onEntered: {
|
|
img_ex.visible = true
|
|
}
|
|
onExited: {
|
|
img_ex.visible = false
|
|
}
|
|
onClicked: {
|
|
console.log("open")
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ColumnLayout{
|
|
Layout.preferredWidth: result_panel.width - 60
|
|
spacing: 10
|
|
|
|
Repeater {
|
|
model: key_point_model
|
|
SearchInput {
|
|
p_txt: model.p_txt
|
|
p_tip_txt: model.p_tip_txt
|
|
p_del: model.p_del
|
|
onClickClose: {
|
|
key_point_model.remove(index, 1)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
Item{
|
|
width: 22
|
|
height: parent.height
|
|
Layout.rightMargin: 8
|
|
Image{
|
|
anchors.centerIn: parent
|
|
source: "qrc:/qt/qml/Gallery/res/image/components/map/ico_plus.png"
|
|
ColorOverlay{
|
|
id: img_plus
|
|
anchors.fill: parent
|
|
color: "#77ED8B"
|
|
source: parent
|
|
visible: false
|
|
}
|
|
MouseArea{
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onEntered: {
|
|
img_plus.visible = true
|
|
}
|
|
onExited: {
|
|
img_plus.visible = false
|
|
}
|
|
onClicked: {
|
|
key_point_model.insert(key_point_model.count - 1, {
|
|
p_txt: "途",
|
|
p_tip_txt: "请输入途径点",
|
|
p_del: true
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
Item{
|
|
Layout.preferredHeight: 30
|
|
Layout.preferredWidth: result_panel.width
|
|
RowLayout{
|
|
anchors.fill: parent
|
|
RadioButton {
|
|
text: "推荐方案"
|
|
checked: true
|
|
FluentUI.primaryColor: "#77ED8B"
|
|
}
|
|
RadioButton {
|
|
text: "高速优先"
|
|
checked: false
|
|
FluentUI.primaryColor: "#77ED8B"
|
|
}
|
|
RadioButton {
|
|
text: "收费最少"
|
|
checked: false
|
|
FluentUI.primaryColor: "#77ED8B"
|
|
}
|
|
}
|
|
}
|
|
|
|
Item{
|
|
Layout.preferredHeight: 30
|
|
Layout.preferredWidth: result_panel.width - 20
|
|
Layout.leftMargin: 10
|
|
Layout.rightMargin: 10
|
|
Layout.bottomMargin: 10
|
|
RowLayout{
|
|
anchors.fill: parent
|
|
spacing: 20
|
|
Button {
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
text: "清除路线"
|
|
}
|
|
Button {
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
text: "搜索路线"
|
|
highlighted: true
|
|
background: Rectangle {
|
|
anchors.fill: parent
|
|
radius: 6
|
|
gradient: Gradient {
|
|
orientation: Gradient.Horizontal
|
|
GradientStop { position: 0.0; color: "#77ED8B" }
|
|
GradientStop { position: 1.0; color: "#22C55E" }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
ScrollView{
|
|
Layout.preferredWidth: 350
|
|
Layout.preferredHeight: {
|
|
var hei = it_height.height - (it_input.implicitHeight + 156)
|
|
return hei
|
|
}
|
|
|
|
Layout.bottomMargin: 0
|
|
|
|
// contentHeight: result_panel.height
|
|
|
|
ColumnLayout{
|
|
id: cl_ranges
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
width: result_panel.width - 20
|
|
// anchors.leftMargin: 10
|
|
// anchors.rightMargin: 10
|
|
// Layout.preferredWidth: result_panel.width - 20
|
|
RouteResult{
|
|
p_show_detail: true
|
|
}
|
|
RouteResult{
|
|
|
|
}
|
|
RouteResult{
|
|
|
|
}
|
|
RouteResult{
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
Item{
|
|
visible: !control.p_show_nav
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
}
|
|
}
|