Cockpit-cpp/ZjQt/Qt/components/DetailPage.qml

import QtQuick
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3
import "backend.js" as Backend
 /*
 车辆连接和1/5摄像头显示
 */
Rectangle {
    id: detailForm
    width: parent.width
    height: parent.height
    color: 'transparent'
 
    property StackView stack: null
    property string name: ""
    property string uid: ""
    property int ifConnect:0

     property var uidToNameMap: {
            1000000: "湛钢B 0533",
            1000001: "湛钢B 0534",
            1000002: "湛钢B 0535",
            1000003: "湛钢B 0537",
            1000004: "湛钢B 0538"
        }
 
   // property int statue: 0
    property int loadingCount: 0
    function refresh()
    {
      //connectButton.text="连接"
      if (!appModel.ready)
        connectButton.text="连接"
      else
        connectButton.text="断开"
    }
    function disconnect()
    {
           disconn.start()
           console.log("321312")
    }
    
    
    //抓爪增加等待视频的动画效果   
    Rectangle  {
            id: loginWaitRectangle
            z:90
            visible: false
            //modal: true
            x: (parent.width - width) / 2
            y: (parent.height - height) / 2
            //closePolicy: Popup.NoAutoClose
            implicitWidth: 570
            implicitHeight: 321
            color: Qt.rgba(1, 1, 1, 0)

            Image {
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    source: 'qrc:/images/waitConnect.png'
                }
               
            Text {
                text: ifConnect===0 ? "正在连接中···":"连接成功"
                font.pointSize: 24
                font.family: alibaba.name
                color: mainAppColor
                anchors.horizontalCenter: parent.horizontalCenter
                y: 200
            }
        
        ProgressBar {
            id:progressBar
            anchors.top:parent.top
            anchors.topMargin: 100
            anchors.horizontalCenter: parent.horizontalCenter
            value: 0.0
            padding: 1
            background: Rectangle {
                implicitWidth: 200
                implicitHeight: 20
                //color:"blue"
                color: "#e6e6e6"
                radius: 10
                border.color: "#888888" 
                border.width: 2 
            }
            contentItem: Item {
                implicitWidth: 200
                implicitHeight: 20
                visible:true
                Rectangle {
                    width: progressBar.value * parent.width
                    height: parent.height
                    radius: 10
                    //color:"red"
                    color: "#17a81a"
                    opacity: progressBar.value 
                    clip: true 
                }
            }
        }
     
        SequentialAnimation {
            id: progressBarAnimation
            NumberAnimation {
                target: progressBar
                property: "value"
                from: 0.0
                to: 1.0
                duration: 30000   //进度动画设置为30秒
            }
            onRunningChanged: {
                if (!running) {
                    //progressBar.value = 0.0; // 重置进度条的值
                    ifConnect=1
                    delay.start()
                    
                }
            }
        }
        Timer {
            id:delay
            interval: 1000 
            repeat: false
            onTriggered: {
                loginWaitRectangle.visible=false
            }
        }
        Timer {
            id:barStart
            interval: 0 
            //running: true
            repeat: false
            onTriggered: {
                progressBarAnimation.start(); // 开始动画
            }
        }
 }
       
    Rectangle{
        id:disconnectFlagImage
        width:400
        height:150
        z:97
        visible:false
        color:'#000066'
        border.color:'#CCCC66'
        border.width:1

        radius:10
        Text{
            anchors.centerIn:parent
            text:"重连请等待7秒..."
        }
        anchors {
            centerIn:parent
            /*
            top: detailForm.top
            topMargin: 550
            left:detailForm.left
            leftMargin:850
            horizontalCenter: parent.horizontalCenter
            */
        }

    }


    Rectangle {
        width: 1440
        height: 820
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        color: 'transparent'
        //border.color: mainAppColor
        //border.width: 1
        radius: 5
 
        //        Image {
        //            id: myIcon
        //            width: 200
        //            height: 200
        //            anchors.horizontalCenter: parent.horizontalCenter
        //            anchors.verticalCenter: parent.verticalCenter
        //            fillMode: Image.PreserveAspectFit
        //            source: 'qrc:/images/car1.png'
        //        }
       
        Rectangle {
            id:panelID
            width: 1000
            height: 800
            color: 'transparent'
            anchors.top: parent.top
            anchors.topMargin: 50
            anchors.horizontalCenter: parent.horizontalCenter
            //            anchors.verticalCenter: parent.verticalCenter
 
            // CAM Panel
           
            Image {
                id: panelImg
                //visible: false
                width: 1000
                height: 800
                fillMode: Image.Stretch//拉伸模式
                //fillMode: Image.PreserveAspectFit//保持宽高比例适应模式
                //fillMode: Image.PreserveAspectCrop //保持宽高比裁剪模式
                //fillMode: Image.Tile//平铺模式
                //source:'qrc:/images/PanelImage.png'
            }
            
            Connections {
                target: LeftAnchor
                onCallQmlRefeshLeftAnchor: {
                //aaa

                    panelImg.source = ""
                    //panelImg.source = "image://PanelImage/"+Math.random()
                    panelImg.source = "image://LeftAnchor"   //从名为LeftAnchor的图像资源中获取数据
                }
            }
            
            Image {
                id: panelImg_camera1
                anchors.topMargin: 140
                width: parent.width
                height: parent.height
                fillMode: Image.Stretch
                visible: true
                source: 'qrc:/images/middle_camera1.png'
                z: 98
            }

            Image {
                anchors.top:panelImg_camera1.top
                anchors.topMargin: -30
                anchors.left:panelImg_camera1.left
                anchors.leftMargin:-25
                
                height: parent.height+25
                fillMode: Image.Stretch
                //左后视镜边框
                source: 'qrc:/images/sideV_left.png'
                z: 99
            }

            Image {
                anchors.top:panelImg_camera1.top
                anchors.topMargin: -30
                anchors.left:panelImg_camera1.right
                anchors.leftMargin:-125
                height: parent.height+25
                fillMode: Image.Stretch
                //左后视镜边框
                source: 'qrc:/images/sideV_left1.png'
                z: 99
            }
        }

        
       
        Text {
            id: carName
            anchors {
                top: myIcon.bottom
                topMargin: 10
                horizontalCenter: parent.horizontalCenter
            }
            //text: name
            //text: uidToNameMap[uid] || ""
            //text:"湛钢B 0533"
            text: uidToNameMap[uid]
            //color: '#eaf4fc'
            color:'#29b6fb'
            font.family: alibaba.name
            //anchors.topMargin: 5
            font.pointSize: 20
        }


        /*
        CButton {
            id: carButton
            x:10
            y:200
            textHeight: 50
            fontHeight: 0.4
            width: 50
            height: 200

            color: pressed ? textClickedColor : mainAppColor
            Text{
                text: "\n 场\n 地\n 管\n 理"
                wrapMode: Text.WordWrap
                font.pointSize: 20
                color:"white"
            //  anchors.horizontalCenter: parent.horizontalCenter
            //     horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
            onClicked:workManage();
        }
        */
               /*
        Text {
            id: carName
            anchors {
                top: myIcon.bottom
                topMargin: 10
                horizontalCenter: parent.horizontalCenter
            }
            text: name
            color: '#eaf4fc'
            font.family: alibaba.name
            font.pointSize: 20
        }
 
        Text {
            id: carConnState
            anchors {
                top: carName.bottom
                topMargin: 10
                horizontalCenter: parent.horizontalCenter
            }
            text: !appModel.ready ? "未连接" : "已连接"
            color: '#eaf4fc'
            font.family: alibaba.name
            font.pointSize: 20
        }*/
         
        
          /*  Image {
                id: model
                x:appModel.ModelX
                y:appModel.modelY
                width: 30
                height: 30
                fillMode: Image.Stretch
                source:'qrc:/images/PanelImage.png'
            }
            */
        Row {
            anchors.top: parent.bottom
            anchors.topMargin: 50
            anchors.horizontalCenter: parent.horizontalCenter
            //height: parent.height
            // anchors.top:parent.top
            // y:250
            // x:100
            //spacing: 40

            CButton {
                id: connectButton
                //anchors.topMargin: 50
                //y:10
                textHeight: 50
                fontHeight: 0.4
                width: 180
                height: 50
                color: pressed ? textClickedColor : mainAppColor
                text: appModel.ready ? "断开" : "连接"
                onClicked: {
                    if (!appModel.ready) {
                        //当没有功能时按钮失效
                        //engineSpeedPlaySound.stop()
                        connectButton.visible = false
                        loading.start()
                        carSelect(uid)
                        backButton.visible = false
                        appModel.ready = true
                        connectButton.text="断开"
                        loginWaitRectangle.visible=true
                        ifConnect=0
                        barStart.start()
                    } else {
                        //engineSpeedPlaySound.stop()
                        connectButton.visible = false
                        disconn.start()
                        appModel.leaveCar(uid)
                        appModel.ready = false
                        connectButton.text="连接"
                        statusLeftLogin.visible=false  //点击断开后车辆数据信息UI界面不显示
                        //stack.pop()
                    }
                }
            }
 
            Timer {
                id: loading
                interval: 30000
                onTriggered: {
                    connectButton.visible = true
                    statusLeftLogin.visible=true
                    //connectButton.text="连接"
                    //backButton.visible=true
                    //                loadingCount++
                    //                carConnState.text = "连接中" + Backend.dot(loadingCount)
                    //                if (loadingCount === 4)
                    //                    loadingCount = 0
                }
            }
 
            Timer {
                id: disconn
                interval: 2000
                onTriggered: {
                    connectButton.visible = true
                    //connectButton.text="断开"
                    backButton.visible = true
                }
            }
            spacing: 50
            CButton {
                id: backButton
                //anchors.top: connectButton.bottom
                //anchors.topMargin: 30
                //anchors.horizontalCenter: parent.horizontalCenter
                textHeight: 50
                fontHeight: 0.4
                width: 180
                height: 50
                //y:10
                visible:appModel.ready?false:true
                //visible: true
                color: pressed ? textClickedColor : mainAppColor
                text: "返回"

                onClicked: {
                connectButton.enabled = true
                    //                carConnState.text = ""
                    stack.pop()
                }
            }
        }

        /*Component.onCompleted: {
                loading.start()   //在组件完成初始化并准备好显示时，loading定时器开始启动
               
        }*/
    }
}